当删除一个项目时，jquery ui获取droppable元素的id

Question

当丢弃一个项目时，我们如何获得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/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>

Answer 1

要获取draggable和droppable元素的id，请使用以下命令：

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

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

对不起，对你来说可能有点晚了，但我刚开始使用jquery并且需要确切的事情。

Answer 2

jQuery UI＆＃39; s droppable API manual提到了如何让＆＃34; drop-on-droppable＆＃34; 非常＆＃34;秘密地＆＃34;在section of greedy option：

  可以检查

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

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

回答你的问题

您可以通过第一个参数droppable在drop的{​​{1}}回调中获取ID。

纯JS

属性：event - 如果未设置ID：空字符串＆＃34;＆＃34;
属性：event.target.id - 如果未设置ID：null

的jQuery

属性：event.target.getAttribute('id') - 如果未设置ID：空字符串＆＃34;＆＃34;
属性：$(event.target).prop('id') - 如果未设置ID：undefined

用法示例

$(event.target).attr('id')

其他信息

  

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

Answer 3

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

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

查看documentation.

Answer 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;    
}