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等似乎不起作用。

Answer 1

不是ui.draggable吗？

如果你去这里（在Firefox中并假设你有萤火虫）并查看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)  
       }

Answer 2

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

...

Answer 3

ui.draggable（）似乎不再起作用了。要获得id，可以使用

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

Answer 4

我尝试了上述大部分内容，但最终只有

event.target.id

为我工作。

Answer 5

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

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

Answer 8

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

仅将ui外部html作为目标，并使用普通的html jquery选择器

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

属性=> id，class，rel，alt，title或自定义属性，如数据名称，数据用户

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

8 个答案: