时间戳

首页 > 解决方案 > 将拖动的项目转换为可放置的

jquery - 将拖动的项目转换为可放置的

问题描述

伙计们，我正在使用 jQuery UI，ol > Li具有可拖放选项的简单操作。

我有两个li项目，类别和子类别。

我的目标是允许用户将多个新类别和子类别拖到现有列表中。

我可以将多个类别和子类别添加到文档刷新时加载的现有列表。但是，除非刷新页面，否则新添加的 li 类别不接受子类别。

<ol class="list">
<li class="category"> a</li>
<li class="category"> b</li>
<li class="category"> c
<ol>
<li class="subcategory"> c1</li>
<li class="subcategory"> c2</li>
</ol>
</li>
</ol>

我可以添加新的类别和子类别。但是假设我添加了新的类别 d，我想为其添加一个子类别。它起作用的唯一方法是我保存状态并刷新页面。

我希望用户构建他们想要的整个列表并在最后保存，而不必在两者之间多次刷新页面。

所以对于类别，我认为我非常接近但无法将其注册到可放置对象。

任何帮助深表感谢。

drop: function(event, ui) {
  $('.list').append(ui.draggable.clone(true).detach().addClass('ui-droppable ui-state-highlight').removeClass('ui-draggable ui-draggable-handle'));

}

Jsfiddle https://jsfiddle.net/ozsie6935/8mch0r1k/6/

谢谢

标签： jqueryjquery-ui

解决方案

目前尚不清楚您要从帖子中完成什么。

我整理了这个可能对你有帮助的例子。

$(function() {
  $(".list .subcategory").draggable();
  $(".list").droppable({
    drop: function(event, ui) {
      var newItem = ui.draggable.clone();
      ui.draggable.remove();
      newItem
        .addClass("ui-state-highlight")
        .removeClass('ui-draggable ui-draggable-handle')
        .attr("style", "");
      $('.list').append(newItem);
    }
  });
});
.list .category,
.list .subcategory {
  width: 150px;
  padding: 0.25em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ol class="list">
  <li class="category"> a</li>
  <li class="category"> b</li>
  <li class="category"> c
    <ol>
      <li class="subcategory"> c1</li>
      <li class="subcategory"> c2</li>
    </ol>
  </li>
</ol>

更新

请参阅：https ://jsfiddle.net/Twisty/b28utk0r/8/

JavaScript

$(function() {

  function makeParentDrop(target) {
    $(target).droppable({
      tolerance: 'pointer',
      accept: "#draggable li.child",
      drop: function(event, ui) {
        alert("dropped, do something ... ");
      }
    });
  }

  $('#draggable li.parent, #draggable li.child').draggable({
    cancel: "a.ui-icon",
    revert: "invalid",
    helper: "clone",
    cursor: "move",
  });


  $('#droppable').droppable({
    tolerance: 'pointer',
    accept: "#draggable li.parent",
    drop: function(event, ui) {
      console.log(ui.draggable.clone());
      var newItem = ui.draggable.clone(true).detach().addClass('ui-droppable ui-droppable-active ui-state-highlight');
      $('.list').append(newItem);
      makeParentDrop(newItem);

    }
  });

  makeParentDrop('#droppable li.parent');

});

由于新项目未初始化为 Droppable 元素，因此您必须对其进行初始化。我添加了一个函数来帮助做到这一点。

推荐阅读