jQuery的拖放 – 如何获取元素被拖动

我正在使用jQuery库来实现拖放。

如何获取正在被拖放的元素？

我想获得div内图像的id。 以下元素被拖动：

<div class="block"> <asp:Image ID="Image9" AlternateText="10/12/2008 - Retina" Width=81 Height=84 ImageUrl="~/uploads/ImageModifier/retina.jpg" runat=server /> </div> 

我从他们的例子中有标准的下降function：

 $(".drop").droppable({ accept: ".block", activeClass: 'droppable-active', hoverClass: 'droppable-hover', drop: function(ev, ui) { } }); 

我已经尝试过各种ui.id等似乎没有工作。

Answer 1

这不是ui.draggable吗？

如果你去这里（在火狐浏览器，并假设你有萤火虫），看看萤火虫控制台你会看到我正在做的ui.draggable对象这是被拖动div的console.dir

http://jsbin.com/ixizi

因此，你需要在drop函数中的代码是

  drop: function(ev, ui) { //to get the id //ui.draggable.attr('id') or ui.draggable.get(0).id or ui.draggable[0].id console.dir(ui.draggable) } 

Answer 2

ui.draggable（）似乎不再工作。 得到一个可以使用的ID

 $(event.target).attr("id"); 

Answer 3

 $(ui.draggable).attr("id") 

…

Answer 4

我尝试了以上大部分，但最终只

 event.target.id 

为我工作。

Answer 5

答案在2017年

很多时间过去了，我发现目前接受的答案已经失效了。

目前的解决scheme：

 $('#someDraggableGroup').draggable({ helper: 'clone', start: function( event, ui ) { console.log(ui.helper.context) console.log(ui.helper.clone()) } }) 

在这里， ui.helper.context指向您要拖动的原始对象， clone()指向克隆的版本。

编辑

以上是使用draggable()函数查看要拖动的对象。 为了检测draggable对象在droppable() draggable对象droppable()丢弃情况，以下工作：

 $('#myDroppable').droppable({ drop: function(event, ui){ console.log(ui.draggable.context) OR console.log(ui.draggable.clone() ) } }) 

Answer 6

redquare是正确的，在你的函数里面引用ui.draggable ：

 $(".drop").droppable({ accept: ".block", activeClass: 'droppable-active', hoverClass: 'droppable-hover', drop: function(ev, ui) { //do something with ui.draggable here } }); 

该属性指向被拖动的东西。

请注意，如果您使用的是克隆的“助手”，则可拖动的将是克隆副本，而不是原始副本。

Answer 7

我有

 drop: function( event, ui ) {alert(ui.draggable.attr("productid"));}