Menu
EDIT: I solved it. But StackOverflow isn't letting me mark my answer as the solution, so I simply am not going to.
I'm having an issue with regard to using Draggable with a CSS transformed parent. Basically, I need to use absolute positioning to spawn a Draggable div directly underneath the cursor. When absolute positioning is used with CSS transforms, the draggable element does a bit of jumping right as the dragging takes place. After the jump takes place, behavior proceeds as expected. The jump does not occur if no transformations are applied to the draggable or the parent div.
Here's a fiddle that shows exactly what the problem is: http://jsfiddle.net/qBubN/7/
body {
background-color: blue;
}
#draggable {
position: absolute;
left: 50px;
top: 50px;
background-color: rgba(0,0,0,0.5);
border: 1px solid black;
width: 350px;
height: 350px;
color: white;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);}
$("#draggable").draggable({
scroll: true,
distance: 5,
grid : [ 10, 10 ],
start: function (event, ui) {
}
});
<html>
<body>
<div id="draggable">
Hello!
</div>
</body>
</html>
Already tried applying this patch, to no avail. There's a (good) chance this fix is too old to work. There's also a chance I am applying the patch wrongly. Webkit and jQuery draggable jumping
855
//css3 transform bug with jquery ui drag - fixed(works fine whether position, absolute or relative)
var __dx;
var __dy;
var __scale=0.5;
var __recoupLeft, __recoupTop;
$("#draggable").draggable({
//revert: true,
zIndex: 100,
drag: function (event, ui) {
//resize bug fix ui drag `enter code here`
__dx = ui.position.left - ui.originalPosition.left;
__dy = ui.position.top - ui.originalPosition.top;
//ui.position.left = ui.originalPosition.left + ( __dx/__scale);
//ui.position.top = ui.originalPosition.top + ( __dy/__scale );
ui.position.left = ui.originalPosition.left + (__dx);
ui.position.top = ui.originalPosition.top + (__dy);
//
ui.position.left += __recoupLeft;
ui.position.top += __recoupTop;
},
start: function (event, ui) {
$(this).css('cursor', 'pointer');
//resize bug fix ui drag
var left = parseInt($(this).css('left'), 10);
left = isNaN(left) ? 0 : left;
var top = parseInt($(this).css('top'), 10);
top = isNaN(top) ? 0 : top;
__recoupLeft = left - ui.position.left;
__recoupTop = top - ui.position.top;
},
stop: function (event, ui) {
$(this).css('cursor', 'default');
//alternate to revert (don't use revert)
$(this).animate({
left: $(this).attr('oriLeft'),
top: $(this).attr('oriTop')
}, 1000)
},
create: function (event, ui) {
$(this).attr('oriLeft', $(this).css('left'));
$(this).attr('oriTop', $(this).css('top'));
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
