jquery ui获取可丢弃元素的ID,当丢弃一个项目

我们如何得到droppable元素的id,当放下一个项目? 在这里我使用jQuery UI和asp.net mvc。

<table id="droppable"> <tr> <td style="width:300px;height:50px">Backlog</td> <td style="width:300px;height:50px">Ready</td> <td style="width:300px;height:50px">Working</td> <td style="width:300px;height:50px">Complete</td> <td style="width:300px;height:50px">Archive</td> </tr> <tr id="cart"> <td id="BackLog" class="drag" style="width:120px;height:50px;"> <img class="draggable" id="1234" src="../../Content/themes/basehttp://img.dovov.comui-icons_222222_256x240.png" /> </td> <td id="Ready" class="drag" style="width:140px;height:50px"> </td> <td id="Working" class="drag" style="width:140px;height:50px"> </td> <td id="Complete" class="drag" style="width:140px;height:50px"> </td> <td id="Archive" class="drag" style="width:140px;height:50px"> </td> </tr> } </table> 

在这里,我想要将图像移动到其他列,并获得该列的ID。 对于拖放我使用脚本

 <script type="text/javascript"> $(function () { $(".draggable").draggable({ containment: '#imageboundary', axis: "x" }); $("#droppable").droppable({ drop: function (event, ui) { $.ajax({ type: "POST", url: '/Project/AddToPhase/' + $(ui.draggable).attr("id") , success: function (data) { $('.result').html(data); } }); } }); }); </script> 

要获取可拖动元素和可拖放元素的id,请使用以下命令:

 $('.selector').droppable({ drop: Drop }); function Drop(event, ui) { var draggableId = ui.draggable.attr("id"); var droppableId = $(this).attr("id"); } 

对不起可能有点晚,但我刚刚开始使用jQuery,需要确切的东西。

jQuery UI的可下载的API手册提到了如何在greedy选项的部分非常“秘密地”获得“drop-on-droppable”

可以检查event.target ,看看哪个droppable收到了可拖动的元素

但请注意, event.target只包含一个DOM元素…

回答你的问题

您将能够通过第一个参数event获取droppable dropcallback中的ID。

纯JS

属性: event.target.id如果ID没有设置:空string“”
属性: event.target.getAttribute('id')如果ID未设置:null

jQuery的

属性: $(event.target).prop('id')如果ID没有设置:空string“”
属性: $(event.target).attr('id')如果ID没有设置:undefined

用法示例

 <script> $(function(){ $(".droppablesSelector").droppable({ drop: function (event, ui) { //display the ID in the console log: console.log( event.target.id ); } }); }); </script> 

附加信息

事件
jQuery的事件系统根据W3C标准规范事件对象
事件对象保证传递给事件处理程序(不需要检查window.event)。 它规范了target ,relatedTarget,metaKey和pageX / Y属性,并提供了stopPropagation()和preventDefault()方法。

你连接一个"drop"事件,并询问你刚才丢弃的元素。 元素是下面的函数中的参数"ui"

 $( ".selector" ).droppable({ drop: function(event, ui) { ... } }); 

看看文档。