当删除一个项目时,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的droppable API手册提到了如何在选项部分非常"秘密地" 获得"drop-on-droppable":greedy

event.target 可以检查哪个droppable收到了draggable元素

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

回答你的问题

您将能够获得ID在你droppable的drop通过第一个参数的回调event.

纯JS

属性:event.target.id- 如果未设置ID:空字符串""
属性:event.target.getAttribute('id')- 如果未设置ID:null

jQuery的

属性:$(event.target).prop('id')- 如果未设置ID:空字符串""
属性:$(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).它 规范化目标,relatedTarget,metaKey和pageX/Y属性,并提供stopPropagation()和preventDefault()方法.

Answer 3

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

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

查看文档。