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

Posted 2023-05-08

【中文标题】jQuery拖放 - 如何获取被拖动的元素

【英文标题】：jQuery drag and drop - how to get at element being dragged

【发布时间】：2010-09-16 21:13:22

【问题描述】：

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

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

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

我尝试了各种ui.id 等，但似乎不起作用。

【问题讨论】：

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

【参考方案1】：

不是ui.draggable吗？

如果你去这里（在 Firefox 中并假设你有 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)  
       

【讨论】：

alexmac - 用调试器替换 console.dir；声明，然后您可以在监视窗口中查看 ui.draggable 属性。不知道为什么它说未定义。什么版本的FB和FF？ dir 方法是 FB 的标准方法，请参阅getfirebug.com/console.html

在控制台之前你需要 window.loadFirebugConsole();让控制台工作。

@MDCore - 从未使用或见过，我自己也从未遇到过任何问题。我假设那是您关闭 FB 并需要启用它的时候。我只是假设所有的网络开发者都有它。

我有一个旧版本的 Firefox（2 个东西）控制台现在可以工作

此解决方案不再有效，请参阅我的当前实施

【参考方案2】：

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

...

【参考方案3】：

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

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

【讨论】：

它不会检索我们要放置项目的元素的 id 吗？

$(event.target) 效果很好，尤其是当您需要获取元素并且同时使用可拖动和调整大小时。

完美运行，这是我第一次看到这个命名而不是 ui.draggable，它不再工作了。谢谢！

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

【参考方案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()函数查看你拖动的对象。为了检测draggable 对象被丢弃在droppable() 中，以下工作：

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

【参考方案5】：

我尝试了上面的大部分，但最后只做了

event.target.id

为我工作。

【参考方案6】：

redquare 是对的，在你的函数里面引用ui.draggable:

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

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

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

【讨论】：

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

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

【参考方案7】：

我明白了

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

【参考方案8】：

如何在任何 jquery ui 操作中操作克隆对象？

只针对 ui 外部 html 并使用普通的 html jquery 选择器

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

attributes => id ,class ,rel,alt ,title 或自定义属性，如 data-name , 数据用户