Question

I’m trying to upgrade jQuery from 1.4.1 to 1.7.1 and found a problem with the jQuery UI droppable functionality. I’m using jQuery 1.8.16 and this Multi-Select, Drag & Drop plugin and found that my page that utilizes it does not work anymore after the upgrade. After many hours of debugging I found out that the event object’s target attribute does not contain the same element anymore.

It’s easiest explained with an example, so I created this on jsfiddle.

$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
      drop: function(event, ui) {
          $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
          $('#target-content').html($(event.target).html());
      }
  });
});

<div class="demo">      
<div id="draggable">     
    <p>Drag me to my target</p>
</div>  
<div id="droppable">
    <p>Drop here</p>
</div>
<div id="test"></div>
</div>

Now, when you use the jQuery 1.5.2 (or 1.6.4, but this version does for some reason not contain jQuery UI) on jsfiddle, and you drag the red box onto the green box, the event.target is refering to the green box, thus showing the text inside. However, when you use jQuery 1.7.x, the event.target is referring to the red box!

To me this seems to be lack of support for jQuery 1.7.x in jQuery UI 1.8.x, and I can’t find any place on the homepages where this would be mentioned.

Now, what should I do? I can fix it in the Multiselect, Drag & Drop plugin, but that will probably break it again if this bug is fixed later.

Answer 1

It’s some time ago now, but better late than never.

A few versions has been released since version 1.8.17 (at the time of writing, the current version is 1.8.20).

On js fiddle one can now select jQuery 1.7.2 with jQuery UI 1.8.18, see this example.
It seems to work in this version, so let’s hope it does so in the future versions too.