jQuery UI Draggable + CSS Transform导致“跳转" [英] jQuery UI Draggable + CSS Transform Causes "Jumping"
问题描述
编辑:我已解决.但是StackOverflow并不能让我将答案标记为解决方案，所以我根本就不会这么做.
I solved it. But StackOverflow isn't letting me mark my answer as the solution, so I simply am not going to.
在将Draggable与CSS转换后的父级一起使用时，我遇到了一个问题.基本上，我需要使用绝对定位在光标下方直接生成Draggable div.当CSS转换使用绝对定位时，可拖动元素会在拖动发生时向右跳一点.发生跳转后，行为将按预期进行.如果没有将任何转换应用于可拖动对象或父div，则不会发生跳转.
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.
这是一个小提琴，准确地显示了问题所在: http://jsfiddle.net/qBubN/7/
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>
已经尝试应用此补丁，但无济于事.此修复程序过旧而无法正常工作的可能性很大.还有机会我错误地应用了补丁. Webkit和jQuery可拖动跳跃
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
推荐答案
//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'));
}
});
这篇关于jQuery UI Draggable + CSS Transform导致“跳转"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
