Question

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

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

在这些方面，我使用jQuery UI放置了可拖动的元素。

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

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

如何做到这一点？

最诚挚的问候，蒂姆 - 。

Answer 1

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

它的工作原理如下：

获取初始父元素的ID并使用jQuery.data
将其放在droppable上时，更新数据

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 }); 
}

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

这是一个revised jsBin示例。

Answer 4

$(element.draggable).parent().attr('id'))适合我

Answer 5

我删除了重复的代码并通过data（）函数保存前一个元素id来解决问题。

JS Bin

<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>

jQuery UI - 删除元素 - ＆gt;从中拖出了div

5 个答案: