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

Question

各位，我正在使用 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/ozzie6935/8mch0r1k/6/

谢谢

Answer 1

不清楚您要通过 post 实现什么。

我整理了这个示例，可能会对您有所帮助。

$(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 元素，您必须对其进行初始化。我添加了一个功能来帮助做到这一点。

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

Convert dragged item to droppable

jquery

jquery-ui