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>