jQuery可拖动可排序

Question

我有一个容器

<div id="contenitore" class="connectedSortable"></div>

使用这个 Jq 代码

$( "#contenitore" ).sortable({
update: function(event, ui){
ElementAppend();},
connectWith: ".connectedSortable"
}).disableSelection();

和其他类似的 div

<div class="element-container"></div>

用这个 Jq 代码来处理一些拖动事件

$("div.element-container").draggable({ 
  cursor: "move", cursorAt: { top: 20, left: 20 },
  drag: function(event, ui) {
  $(this).addClass("handled");
  },
  stop: function(event, ui) {
       $(this).removeClass("handled");
    },
  }).disableSelection();

所以所有的模拟人生都可以正常工作，但是如果我添加了

connectToSortable: ".connectedSortable"

要拖动我得到这个奇怪的错误

TypeError: e(...).data(...) 未定义

并且代码有效

---

我已经尝试找到解决方案，如果可以帮助谁来回答。

之前的代码在 wpress 主题中。 所以我在一个简单的 HTML JS 页面中尝试了所有内容，现在的错误是

TypeError: $(...).data(...) 未定义

var o = $(this).data("ui-draggable").options;

在 jQuery UI - v1.10.3 - 2013-08-05 的这段代码中

所以我尝试添加一个类 ui-draggable 到 div 但仍然不起作用

Answer 1

将connectToSortable 放入您的draggable 函数中。

jQuery 部分：

  $("#container").sortable({  
     receive: function(event,ui){  
        ui.item.remove();
     }
   });

  $("#element-container").draggable({
      connectToSortable: "#container",
      helper: "clone",
      revert: "invalid"
  });

HTML 部分：

  //First
  <div id="container"></div>
  //Second
  <div id="element-container"></div>