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

Question

我正在使用 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>

我有他们示例中的标准 dropped 函数：

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

我已经尝试过各种 ui.id，但似乎都没有起作用。

- alexmac

---

请注意，ui.draggable 不再受支持。请改用 $(data.helper).attr('ppp')。 - Royi Namir

Answer 1

这不是ui.draggable吗？

如果你在这里查看（使用火狐浏览器并假设你有Firebug），并在Firebug控制台中查看，你将看到我正在对ui.draggable对象进行console.dir操作，它是被拖动的div。

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)  
       }

- redsquare

---

alexmac - 将 console.dir 替换为 debugger; 语句，然后您可以在监视窗口中查看 ui.draggable 属性。不确定为什么会显示未定义。FB 和 FF 的版本是什么？dir 方法是 FB 的标准方法，请参见 http://getfirebug.com/console.html - redsquare

在控制台之前，您需要 window.loadFirebugConsole(); 才能使控制台正常工作。 - MDCore

@MDCore - 我从未使用或看到过这个，也从未遇到过任何问题。我猜想这是在你关闭FB时需要启用它的情况下发生的。我只是假设所有的网站开发人员都会开启它。 - redsquare

我之前使用的是旧版 Firefox（2.x），现在控制台可以正常工作了。 - alexmac

此解决方案已不再适用，请查看我的实现以获取当前的实现。 - Maurits Moeys

Answer 2

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

...

- Zak

Answer 3

ui.draggable()似乎不再起作用。 要获取id，可以使用：

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

- karvonen

---

它难道不是检索我们正在放置物品的元素的ID吗？ - Pierre-Adrien

$(event.target)非常好用，特别是当您需要同时使用可拖动和可调整大小的元素时。 - Arsen K.

非常完美的运行，这是我第一次看到它被命名为ui.draggable，而不再使用了。谢谢！ - Loyalar

这个语法在官方文档中被列为一个错误：https://developer.mozilla.org/en-US/docs/Web/Events/dragenter （此外，在Chrome中它对我也不起作用。） - HoldOffHunger

Answer 4

2017年可行的答案

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

当前可行的解决方案：

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

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

编辑：

以上内容是为了使用 draggable() 函数查看正在拖动的对象。要检测在 droppable() 中放置了哪个 draggable 对象，可以使用以下方法：

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

- Maurits Moeys

Answer 5

我尝试了以上大部分方法，但最终只有：

event.target.id

对我来说起作用了。

- Daniel Mlodecki

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
                       }
});

这个属性指向正在被拖动的对象。

请注意，如果您使用了克隆的“helpers”，那么可拖动的将是克隆的副本，而不是原始对象。

- Adam Bellaire

---

ui.draggable是一个对象，但我似乎无法获取可拖动元素的div。 ui.draggable.id或ui.draggable.innerHTML都不起作用。 - alexmac

ui.draggable.attr('id') 或 ui.draggable.get(0).id - redsquare

Answer 7

i got

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

- Desperado

Answer 8

如何在任何jQuery UI操作中操作克隆对象？

只需针对UI外部HTML并使用普通的HTML jQuery选择器即可。

var target_ui_object_html=$(ui.item.context).attr("your attributes");

属性 => id，class，rel，alt，title 或自定义属性如 data-name，data-user

- Shailesh Dwivedi