jQuery UI - 删除元素 -> 从哪个 div 拖动

Question

我在使用 jQuery UI 时遇到了问题，并获取了一些关于已删除项目的信息。 我在屏幕上有三个区域：

<div id="area1"></div>
<div id="area2"></div>
<div id="area3"></div>

在这些区域中，我放置了可使用 jQuery UI 拖动的元素。

现在，如果一个元素从一个区域被拖放到另一个区域，我不仅会得到该元素被拖放到的区域编号，我还想要在新的拖放之前该元素被丢弃的区域编号。

我创建了一个完整的工作示例：http://jsbin.com/iyaya3/ 有一个蓝色的可拖动元素，如果我将它从区域 1 拖到区域 2，我希望收到带有“从区域 1 拖到区域 2”的警报消息。

如何做到这一点？

最好的问候，蒂姆-。

Answer 1

嘿，我更新了你的jsbin - http://jsbin.com/iyaya3/3

它是这样工作的：

1. 获取初始父元素的 id 并使用 jQuery.data 将其保存在可拖动对象上
2. 将其放置在可放置对象上时，更新数据

Answer 2

我有两个想法： 1）您可以在每个div中的元素上放置一个类或ID：

<div id="area1"><node class="from1"></node></div>
<div id="area2"><node class="from2"></node></div>
<div id="area2"><node class="from2"></node></div>

然后在你拥有该项目时进行测试

2) 编写一个函数来进行克隆，而不是依赖拖放来为您完成 (http://ui-dev.jquery.com/demos/draggable/#option-helper) 然后测试对于父级并将其存储（在拖动器范围之外的单例中）您以后可以获取它。

我想我更喜欢第一个（即使您没有 html 访问权限来添加这些类，只需使用 javascript 添加即可）

Answer 3

在您的 draggable 设置中，添加以下内容：

start: function(event,ui){
  ui.helper.data('from-id',  $(this).parent().attr('id') );
}

这将作为数据附加要从中拖动元素的容器的 ID。

那么，在droppable，你可以有：

 alert( 'I was dragged from ' + ui.draggable.data('from-id') );

这是updated jsBin。

---

编辑：start 函数创建一个闭包，因此$(this).parent().attr('id') 继续指向原始父级。此问题的一种解决方案（如果您希望保留启动功能）是在拖动停止时清除 start：

stop: function(event,ui){
  ui.helper.draggable({ start: null }); 
}

这将允许可放置处理程序中的data 方法更新from-id，而不会立即被start 函数恢复为原始值。

这是一个revised jsBin 示例。

Answer 4

$(element.draggable).parent().attr('id')) 为我工作

Answer 5

我删除了重复的代码，通过data()函数保存了之前的元素id解决了这个问题。

JS斌

<script type="text/javascript">
$(document).ready(function() {


  $('#area1').append('<div class="shoulddraggable" style="width:100px;height:100px;top:0px;left:0px;background-color:blue;" data-elementid="100"></div>');
  $(".shoulddraggable").draggable({
    scroll: false,
    revert: "invalid",
    scope: "items",
  });

  $(".shoulddraggable").data('previousId', 'area1');

  $('.droppable').droppable({
      scope: "items",
      drop: function(event, ui) {
        alert('Previous container id: ' + ui.draggable.data('previousId'));
        alert("Element: "+ui.draggable.data("elementid")+" dragged into" + $(this).attr('id'));
        ui.draggable.data('previousId', $(this).attr('id'));
      }
  });
});

</script>
</body>
</html>