CODEWITHSUNDEEP
javascriptjquery
Andrew
Andrew

Reputation: 359

Jquery list drag drop

I have a Jquery Drag Drop List which I want to update immediately in MYSQL using Jquery Ajax Post.

Because I can drag elements between lists (more than one list), I need to get the parent ID (parent being list category ID - where the draggable is dragged to)

When I drag from one category / list to another I am always given the former ID..

For example:

CAT 1 ------------ CAT 2

If I was to drag something from CAT1 to CAT2 - the ID would be CAT1 and not the new category ID...

I have added my codes below:

Jquery:

<script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.mouse.js"></script>
    <script src="js/jquery.ui.sortable.js"></script>
<script>
    $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
    </script>


    <script type="text/javascript">
    $(document).ready(function(){
    $(".mouseup").mouseleave(function(){
    var sparent = $(this).parent().attr("id");
    alert(sparent);
    });
    });
    </script>

LIST HTML:

<div class="demo">
<div class="box">
<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default mouseup">Item 1</li>
    <li class="ui-state-default mouseup">Item 2</li>
</ul>
</div>
<div class="box">
<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight mouseup">Item 1</li>
    <li class="ui-state-highlight mouseup">Item 2</li>
</ul>
</div>
</div>

Any help would be appreciated.

Thank you in advance!

Upvotes: 0

Views: 645

Answers (2)

vittore
vittore

Reputation: 17589

Event that you need to handle is received.

 $(".connectedSortable" ).on( "sortreceive", function(event, ui) { 
     alert(ui.item.parent()[0].id); 
     // also ui.sender will hold original list, from where element was taken
 });

EDITED: depending on the fact if you need to handle case when items were just reordered, ie you drag and drop within same list, or not you are going to use received or stop event. received will fire only in case you drag to another list. stop will fire even if you leave item in the same list.

Upvotes: 0

Wesley
Wesley

Reputation: 5621

What you want is here: http://jqueryui.com/demos/draggable/#events

$( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable",
    stop: function(event, ui) { alert($(ui.item).parent().attr("id") }
}).disableSelection();

Placing your code in the stop callback will allow you check the right ID.

Upvotes: 2

Related Questions