javascript - 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>

我有他们示例中的标准删除功能：

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

我尝试了各种ui.id似乎不起作用的方法。

score 40 · Accepted Answer

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

score 14 · Accepted Answer

14

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

...

于 2009-03-18T23:11:42.623 回答

score 12 · Accepted Answer

12

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

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

于 2011-04-12T11:17:24.243 回答

score 7 · Accepted Answer

答案在 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在 a 中丢弃了什么对象droppable()，以下工作：

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

score 6 · Accepted Answer

6

我尝试了上述大部分方法，但最后只

event.target.id

为我工作。

于 2012-02-08T15:24:24.437 回答

score 3 · Accepted Answer

redquare 是对的，在你的函数里面是指ui.draggable：

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

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

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

score 2 · Accepted Answer

2

我有

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

于 2011-06-20T05:58:22.920 回答

score 0 · Accepted Answer

如何在任何 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 , data-user

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

8 回答 8

Related

Reference