jQuery-UI 可拖动和可放置项目变为不可拖动

Posted 2023-05-08

【中文标题】jQuery-UI 可拖动和可放置项目变为不可拖动

【英文标题】：jQuery-UI draggable and droppable items become non draggable

【发布时间】：2018-04-13 20:01:01

【问题描述】：

我有 2 个 div：#leftDiv 和 #mainDiv。 #leftDiv 包含一些列表项，可以拖放到#mainDiv 中，但是有一个问题，在#mainDiv 中放置元素后变得不可拖动。我能用这个做什么？这是我的脚本：

$(document).ready(function()
  $('#output li').draggable(
    helper: 'clone',
    revert: 'invalid'
  );
  $('#mainDiv').droppable(
    drop: function(event, ui)
      var item = $('<div class="foo">').append(ui.draggable.text());
      $(this).append(item);
    
  );
  $(".foo").draggable();
);

我想让#mainDiv 中的元素可拖放到用户想要的任何位置。

【参考方案1】：

您正在创建默认情况下不可拖动的新 foos。你需要制作它们：

item.draggable();
$(this).append(item).

【讨论】：

谢谢，它有效，但如果您也能提供帮助，我还有一个问题。现在，当我将这个项目拖放到同一个 div 中时，每次都会出现一个新的克隆。有没有简单的方法来解决这个问题？

@VaxoBasilidze ，这是因为您正在克隆对象。完成后不要克隆或.remove 助手。或者您可以使用original 克隆来移动原始对象？ （这取决于您的 UI 设计）。

重点是，如果元素是从另一个div拖出来的，一定要克隆，如果拖到同一个div里面，一定不能克隆。我试过添加 $(ui.helper).remove();在 item.draggable(); 内，但没有工作。

我认为ui.helper是一个jQuery对象；你试过ui.helper.remove()吗？