jquery ui获取可放置元素的id，当放置一个项目时 [英] jquery ui get id of droppable element, when dropped an item

问题描述

当放置一个项目时，我们如何获取可放置元素的 id?这里我使用 jquery ui 和 asp.net mvc.

How we get the id of droppable element, when dropped an item? Here i use jquery ui and 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.对于拖放，我使用脚本

Here i want to move image in Ist column to other column and get the id of that column. For drag and drop i use the script

<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，请使用以下命令:

To get the id of both the draggable and the droppable elements use the following:

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

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

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

Sorry might be a little late for you but I have just started using jquery and needed the exact thing.

这篇关于jquery ui获取可放置元素的id，当放置一个项目时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！