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>