jquery拖放 - 获取从拖放中拖动的元素的id

Question

有没有办法从被拖动的元素中获取id(或其他一些属性值),当一个元素被删除时？

例如,在左边,我有一堆div,我可以将图像放入.在右边我有一个包含图像的div.当我将图像从右侧拖动到左侧的div时,我可以获得有关拖动[图像名称]的内容以及它在[div id]上删除的内容的信息.

如果我现在想要将图像从左边的div拖到右边的div,那么当我将图像放在右边的div上时,如何获得图像所在的div的id.

对不起,如果这令人困惑.

Answer 1

以下是适合您的可运行解决方案.

左侧有一个带有可拖动元素的容器(可能是图像),右侧有容器,您可以在其中放置这些可拖动元素.在从左到右删除元素时,您将看到一个警告,显示要删除的元素的ID以及从中删除项目的容器.

如果您想知道项目被拖动的元素,可以通过访问拖放元素的父级来获取它,因为拖动元素只会相对于其容器更改其位置.

$(function() {
      $( ".draggable" ).draggable();
 
        $( ".droppable, #droppable-inner" ).droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                alert(ui.draggable.attr('id') + ' was dropped from ' + ui.draggable.parent().attr('id'));
                $( this ).addClass( "ui-state-highlight" );
                
                // Move the dragged element into its new container
                ui.draggable.attr('style','position:relative');
                $(this).append(ui.draggable);
                
                return false;
            }            
        });
  });

.draggable { 
  width: 100px;
  padding: 0.5em;
  margin: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

.droppable {
  width: 230px;
  min-height: 120px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div id="container1" class="droppable">

    <div id="d1" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>

    <div id="d2" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>

    <div id="d3" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>
 
</div>

<div id="container2" class="droppable ui-widget-header">
    <p>Drop here!</p>
</div>
 
<div id="container3" class="droppable ui-widget-header">
    <p>Drop here!</p>
</div>