During drag, draggable clone is changing it's dimensions. But clone hitbox stays the same as element from which it's being dragged, and appears to position itself somewhere vertically centered inside clone element.
The question is - is it possible to fix this in order to stretch hitbox to clone dimensions? Because I'm having an issues by not being able to normally drop those elements inside certain droppable containers (for example, drag item holding it with item's top-left corner).
And here is an example, where you can drag squares from yellow box(draggables) into pink box(droppable) and see if clone element is over or out of droppable box by ".log_box" element http://codepen.io/anon/pen/BjyzI.
Here is JS code itself
//clone is having class 'bigger' added, to multiply it's size
$('.content_list li').draggable({
helper: function(event, ui) {
return "<div class='widget content bigger'>I'm flying!!! And I'm bigger than my parent!' :)</div>";
},
revert: 'invalid'
});
//simple caching of a .log_box list query
var $log_box = $('.log_box');
$('.droppable_box').droppable({
activeClass: 'drop_here',
drop: function(event, ui) {
$log_box.append('<li>Drop hit.</li>');
},
over: function(event, ui) {
$log_box.append('<li>Over.</li>');
},
out: function(event, ui) {
$log_box.append('<li>Out.</li>');
}
});
I don't really see an issue with the hitbox. It's exactly the default behaviour for the cloned helper
's size. Perhaps you find it strange since the target droppable's size is much smaller than the draggable? As the documentation for the tolerance
option says:
"intersect": Draggable overlaps the droppable at least 50% in both directions.
(this overlap is somewhat forced when the draggable is bigger than the droppable)
Maybe you could use the tolerance
option to improve the visual usability:
$('.droppable_box').droppable({
tolerance: "touch"
});
Here's a fork on your pen: http://codepen.io/anon/pen/bywAf