【问题标题】：jquery ui get id of droppable element, when dropped an itemjquery ui获取可放置元素的id，当放置一个项目时
【发布时间】：2011-07-30 14:09:18
【问题描述】：

当放置一个项目时，我们如何获取可放置元素的 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/base/images/ui-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>

在这里，我想将 Ist 列中的图像移动到其他列并获取该列的 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>

【问题讨论】：

标签： jquery-ui drag-and-drop

【解决方案1】：

要同时获取可拖动和可放置元素的 id，请使用以下命令：

$('.selector').droppable({ drop: Drop });

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

抱歉，您可能有点晚了，但我刚刚开始使用 jquery，需要确切的东西。

【讨论】：

这是错误的。 ui.draggable 只返回可拖动元素而不是它被拖放到的元素。使用 $(this) 来获取元素。
ui.draggable 对我来说是未定义的。
谢谢，它工作得很好，我正在寻找这个答案。 1+

【解决方案2】：

jQuery UI 的droppable API manual 提到了如何在section of greedy option 中非常“秘密”地获得“dropped-on-droppable”：

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

但请注意，event.target 仅包含一个 DOM 元素...

回答您的问题

您将能够通过第一个参数event 在您的droppable 的drop 回调中获取ID。

纯 JS

属性：event.target.id - 如果没有设置 ID：空字符串“”
属性：event.target.getAttribute('id') - 如果没有设置 ID：null

jQuery

属性：$(event.target).prop('id') - 如果没有设置 ID：空字符串“”
属性：$(event.target).attr('id') - 如果没有设置 ID：未定义

用法示例

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

其他信息

Event
jQuery的事件系统对事件对象进行规范化符合W3C标准。
事件对象保证为传递给事件处理程序（不需要检查 window.event）。它 规范化目标、relatedTarget、which、metaKey 和 pageX/Y 属性并提供 stopPropagation() 和 preventDefault() 方法。

【讨论】：

【解决方案3】：

您连接一个"drop" 事件并询问您刚刚删除的元素。该元素为下面函数中的参数"ui"

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

看看documentation.

【讨论】：

谢谢.. 我们需要更多解释

【解决方案4】：

<ul class="listitems">
    <li data-position="3">Item 3</li>
    <li data-position="2">Item 2</li>
    <li data-position="1">Item 1</li>
    <li data-position="4">Item 4</li>
</ul>

jQuery 代码

$(".listitems li").sort(sort_li).appendTo('.listitems');
// sort function callback
function sort_li(a, b){
    return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;    
}

【讨论】：