使用jquery拖拽，从被丢弃的div中获取值答案

【问题标题】：Using Jquery to drag and drop, get value from dropped div使用jquery拖拽，从被丢弃的div中获取值
【发布时间】：2015-01-31 12:40:54
【问题描述】：

我正在使用 Jquery 进行拖放。

我制作要拖动的项目的简短 javascript 是：

$(".draggable").draggable();

我制作可放置区域的简短 javascript 是：

$("#droppable").droppable();

这是我的可拖动项目短 HTML 代码：

 <div id="comItem[]" class="computerItem draggable">
    <img src="img/com.png" class="assetImg" alt="Computer Info" title="">
    <span id="owner[]" class="textLabel"></span>
    <span id="ipaddress[]" class="textLabel"></span>
 </div>

有人知道如何从可放置区域中的放置物品中获取值吗？我想从丢弃的项目中创建对象数组？

非常感谢。

【问题讨论】：

你在使用像 jQuery ui 这样的库吗？
我正在使用 jquery 和 jquery-ui。
cerlin 打败了我，他的回答应该可以

标签： javascript jquery html css drag-and-drop

【解决方案1】：

您可以在drop 操作中使用ui.draggable 对象

$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $(this).append($(ui.draggable).find('img'));
    }
})

这里ui.draggable 是您删除的元素。（在这种情况下是整个 div）

【讨论】：

谢谢，你知道我怎样才能得到中的值吗？
您可以使用$(ui.draggable).find('span')。这将返回两个跨度标签
它工作！太感谢了。我可以再问一个问题吗？如果可放置区域中有许多相同ID的放置div，我如何获取span中的所有值？
每次删除元素时都会调用drop 事件。因此，每当发生下降时，获取其中的跨度值并将其推送到数组/对象。最后，您将拥有一个包含所有已删除元素数据的数组/对象

【解决方案2】：

你必须使用 drop 事件来实现 droppable。这就是我的意思。

var items;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    drop: function(event,ui) {
        items = [ui.draggable];
    }
});

这是一个工作小提琴http://jsfiddle.net/wLkutytx/

来源：http://api.jqueryui.com/droppable/#event-drop

【讨论】：