Tho*_*lik 11 css jquery jquery-ui scale
编辑:我解决了.但StackOverflow并没有让我将我的答案标记为解决方案,所以我根本不会这样做.
关于将Draggable与CSS转换后的父级一起使用,我遇到了问题.基本上,我需要使用绝对定位直接在光标下面生成一个Draggable div.当绝对定位与CSS变换一起使用时,可拖动元素会在拖动发生时稍微向右跳跃.跳转发生后,行为按预期进行.如果没有对可拖动或父div应用转换,则不会发生跳转.
这是一个小提琴,准确显示问题所在: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 draggable jump
小智 14
//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'));
}
});
Tho*_*lik 11
我找到了解决方案.
position:absolute;使用Draggable和CSS转换时完全避免使用该解决方案.您可以轻松地操作从绝对/窗口/任何坐标到相对的任何内容,这就是我所做的.
就我而言,我在鼠标下面产生了一个Draggable元素.我基于鼠标位置和元素的offset()(在窗口坐标中)计算了相对位置,然后除以父div的比例.
这是一个片段:
// ops.[x|y] is the mouse position in window coords
// parentDiv.offset().[left|right] is the div position in window coords
// get the scale transform matrix from our poorly written panzooming lib
var mtx = graph.parentDiv.panzoom('getMatrix');
var zx = mtx[0];
var zy = mtx[3];
// calculate the relative position
var x = (ops.x - parentDiv.offset().left) / zx;
var y = (ops.y - parentDiv.offset().top) / zy;
// set some initial css
parentDiv.css('position', 'relative')
.css('left', x + 'px')
.css('top', y + 'px');
// initialize the draggable
parentDiv.draggable({
stack: $(graph.parentDiv).children(),
drag: function(e, ui){
var mtx = graph.parentDiv.panzoom('getMatrix');
var zoomScaleX = mtx[0];
var zoomScaleY = mtx[3];
// scale the delta by the zoom factor
var dx = ui.position.left - ui.originalPosition.left;
var dy = ui.position.top - ui.originalPosition.top;
ui.position.left = ui.originalPosition.left + (dx / zoomScaleX);
ui.position.top = ui.originalPosition.top + (dy / zoomScaleY);
}
});
| 归档时间： |
|
| 查看次数： |
11444 次 |
| 最近记录： |