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

Posted 2023-05-08

【中文标题】将拖动的项目转换为可放置的

【英文标题】：Convert dragged item to droppable

【发布时间】：2021-10-14 14:02:20

【问题描述】：

各位， 我正在使用 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>

我可以添加新的 category 和 subcategory。但是假设我添加了新的category d，我想添加一个subcategory。它的唯一工作方式是我保存状态并刷新页面。

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

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

非常感谢任何帮助。

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/

谢谢

【问题讨论】：

请提供更完整的复制示例。当项目被丢弃时，它不会被初始化为 Droppable 元素。你必须初始化它。

你也可以考虑Sortable：jqueryui.com/sortable/#connect-lists

【参考方案1】：

不清楚你想从你的帖子中完成什么。

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

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

【讨论】：

所以我创建了以下 JSfiddle 来演示该行为。您会看到孩子可以拖动到任何父母，除非添加了新的父母。 jsfiddle.net/ozzie6935/8mch0r1k/6

非常感谢@Twisty