How to track jQuery drag and drop feature

Question

I am using bootstrap with jQuery UI to create drag and drop feature for my lists.

My HTML is:

<ul class="draggablePanelList list-unstyled">
    <li class="panel panel-info">
        <div class="panel-heading">You can drag this panel.</div>
        <div class="panel-body">Content ...</div>
    </li>
    <li class="panel panel-info">
        <div class="panel-heading">You can drag this panel too.</div>
        <div class="panel-body">Content ...</div>
    </li>
</ul>

My script which makes the drag and drop feature work:

jQuery(function($) {
    var panelList = $('.draggablePanelList');

    panelList.sortable({
        // Only make the .panel-heading child elements support dragging.
        // Omit this to make then entire <li>...</li> draggable.
        update: function() {
            $('.panel', panelList).each(function(index, elem) {
                 var $listItem = $(elem),
                     newIndex = $listItem.index();

                 // Persist the new indices.
            });
        }
    });
});

I want to add javascript which indicates which item was dragged and dropped and where it is now in the list (using a element attribute to track). How can I do that.

Thanks

score 1 · Answer 1 · answered Aug 22 '15 at 17:38

1

There are draggable and resizable functions in the UI. I use the following to handle events once it's finished resizing:

.resizable('stop' : function(){ doSomething.call(this); }.bind(this))

You could include the same binding to your drag 'n drop UI function. You may have to add a listener to get the target of the list item.

Edit: Here's the draggable function:

.draggable({ 'stack'       : '.classContainer', 
             'handle'      : '.classThatHandlesDrag', 
             'containment' : '#divThatLimitsTheDrag' })

answered Aug 22 '15 at 17:38

Data

1,337
11
17

thanks for pointing that out. Now is there a way to indicate which item was dragged and dropped and where it is now on the list. – Alex Zahir Aug 23 '15 at 03:17
you can handle UI events, as shown in the `.resizable` code I posted above, here's one for draggable: http://stackoverflow.com/a/25363015/1837472 Just use `function(event){` and you can use `$(this)` to see what triggered the drag. – Data Aug 23 '15 at 03:24
okay thanks i will work on this and get back to see if can come up with the specific solution for the question – Alex Zahir Aug 23 '15 at 04:02
i was unable to use this to track the drag and drop feature – Alex Zahir Aug 28 '15 at 14:14

How to track jQuery drag and drop feature

1 Answers1