So I've got two columns, draggables and another with droppables. I've got it working the way I want it to, which is when draggable starts, slide container to left, showing droppable column.
However, when the droppable column slides over… unless you vigorously shake the draggable the droppables are NOT highlighting.
Here's a jsFiddle to illustrate the issue.
javascript
$('#first_list > ul > li').draggable({
revert:true,
helper: function () {
var helper = $('<div class="helper">' + $(this).clone().html() + '</div>');
return helper.appendTo('body').css({'zIndex':5});
},
start:function(event,ui) {
$('#inner-container').animate({left:'-200px'},'fast');
},
stop:function(event,ui) {
$('#inner-container').animate({left:'0'},'fast');
}
});
$('#second_list li').droppable({
hoverClass:'active_drop',
drop:function(event,ui) {
$('#result_list').append('<li>' + ui.helper.text() + ' on ' + $(this).text() + '</li>');
}
});
});
html
<div id="container">
<div id="inner-container">
<div class="column" id="first_list">
<ul>
<li><span></span> First</li>
<li><span></span> Second</li>
<li><span></span> Third</li>
<li><span></span> Fourth</li>
</ul>
</div>
<div class="column" id="second_list">
<ul>
<li><span></span> First</li>
<li><span></span> Second</li>
<li><span></span> Third</li>
<li><span></span> Fourth</li>
</ul>
</div>
</div>
</div>
<ul id="result_list"></ul>
This question is a bit old but since it doesn't have an accepted answer, here goes: setting the refreshPositions
option in the draggable objects to true
solves the issue.
According to the API (http://api.jqueryui.com/draggable/#option-refreshPositions):
If set to
true
, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.
Here is an updated JSFiddle with the option set: http://jsfiddle.net/R2hMC/1/