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等似乎没有工作。

这不是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) } 

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

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

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

 event.target.id 

为我工作。

答案在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() ) } }) 

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

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

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

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

我有

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