JQuery UI Draggable/Droppable

Question

I am having difficulty activating JQuery UI draggable and droppable elements. I am using Twitter Bootstrap as well as Jinja2 for templating. Here is my html:

      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">communities</li>
          {% for community in communities %}
            <li class='draggable'><a href="http://localhost:8080/users/{{community}}">{{community}}</a></li>
          {% endfor %}         
        </ul>
      </div><!--/.well -->
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
            <li class='droppable'><i class="icon-trash"></i><span class="label label-warning">trash</span></li>   
        </ul>
      </div><!--/.well -->

I am trying to make the elements of the sidebar-nav called 'communities' draggable into the sidebar-nav called 'trash'. Here is the JQuery:

$('.draggable a').on('mouseover', function(){
    $(this).draggable();
});

$('.droppable i').on('mouseover', function(){

    drop: function( event, ui) {

        $('#dialog').dialog()

    }

});

The reason I used .on() to activate the communities is to allow for the user to dynamically add more. The problem I am having with this code is that neither the draggables nor droppables are activated by it, but when I move to the console and activate the draggables with $('.draggable a').draggable(), they are activated.

I guessed that this issue stemmed from the html elements loading after the JQuery was executed. I moved the JQuery to the end of the page and surrounded it with $(document).ready(function(){...}), to no effect. Then surrounded the script with $(window).bind("load", function() {...}), also to no effect.

I am at a loss and would appreciate some input.

Answer 1

First of all I believe your problem may be that you are not calling droppable() on your droppable container. The javascript you provide produces errors, which may be why your droppable and draggable elements are not activated. Here is an example, jsfiddle . It is not pretty and it doesn't take into consideration Bootstrap or Jinja2, but it demonstrates what you are after.

You're right, you need to make sure the the draggable and droppable js is executed after any initial DOM modifying JS. I don't believe calling draggable() or droppable() using the on() event is buying you anything. If new DOM elements are added after your script has run then you will still need to attach the on() event to those elements as well. You will be just as well off attaching the desired ui action directly and ditching the on() event, unless I'm missing something and you need them for some other reason.

Answer 2

For binding the events on dynamically added elements: try to use on() method this way:

$(document).on( 'mouseover', '.draggable a', function(){
    $(this).draggable();
});

And similar for droppable part of the code.

And secondly, for droppable to work: why not just use the same pattern in droppable part of the code as was used in draggable? So invoke droppable this way:

$(document).on( 'mouseover', '.droppable i', function(){
    $(this).droppable();
});

So using directly droppable() method instead of drop event.