CODEWITHSUNDEEP
jquery-uidrag-and-drop
user685254
user685254

Reputation: 521

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

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>

Upvotes: 45

Views: 94205

Answers (4)

Sachin Saini
Sachin Saini

Reputation: 401

<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 code

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

Upvotes: 0

jave.web
jave.web

Reputation: 15022

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.

Upvotes: 8

Andy
Andy

Reputation: 2179

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.

Upvotes: 100

The_Butcher
The_Butcher

Reputation: 2488

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.

Upvotes: 1

Related Questions