问题

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>

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>

回答1:

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");
}

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

回答2:

jQuery UI's droppable API manual mentions how to get the "dropped-on-droppable" very "secretly" in the section of greedy option:

event.target can be checked to see which droppable received the draggable element

But note that event.target contains just a DOM element...

Answer to your question

You will be able to get the ID in your droppable's drop callback through the first parameter event.

Pure JS

Property: event.target.id - if ID is not set: empty string ""
Attribute: event.target.getAttribute('id') - if ID is not set: null

jQuery

Property: $(event.target).prop('id') - if ID is not set: empty string ""
Attribute: $(event.target).attr('id') - if ID is not set: undefined

Usage example

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

Additional info

Event
jQuery's event system normalizes the event object according to W3C standards.
The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.

回答3:

You hookup a "drop" event and interrogate the element that you just dropped. The element being the parameter "ui" in the function below

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

Have a look at the documentation.

来源：https://stackoverflow.com/questions/5562853/jquery-ui-get-id-of-droppable-element-when-dropped-an-item

标签

jquery-ui

drag-and-drop

jquery ui get id of droppable element, when dropped an item

问题