• Geek asks and answers

    JQuery droppable gets draggable id

    I want to get a draggable id when I dropped to a specific div

      Drag  <ul id="demo" > 
         <li id="1" ></li>
         <li id="2" ></li>
        <li id="3" ></li>
        </ul>

         <div class="drop"> drop here!! </div>

    JQuery

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

      // i need to get dragged id (note:able to  drag multiple ids)

        1,2,3..     

            }       
            });

    Please help me! Thnks

    +3
    source share
    3 answers

    As the jQuery UI dropable doc says

    All callbacks receive two arguments: the source browser event and the prepared ui object, see below for documentation of this object (if you call your second argument “ui”):

    ui.draggable - , jQuery.
    ui.helper - , jQuery
    ui.position - {top:, left:}
    ui.offset - {top:, left:}

    ui.draggable - , jQuery object.

    , , ui.draggable.prop('id')

    +13

    ui.draggable .

    drop: function(event, ui) {
    var id = ui.draggable.attr("id");
}

    DEMO: http://jsfiddle.net/9RBJG/

    +8

    you can add the dropped nodes to the div, through the div you can get all the reset identifiers. as below

    $(".drop").droppable({
    drop: function(event, ui) {
        var id= ui.draggable.attr("id");
        $("#dropped-divs").append(id); 
    }
    0
    source

    More articles:


    All Articles