我正在尝试让 Jquery UI Sortable 与缩放一起工作。问题是鼠标的移动速度与您拖动的元素不同。有很多关于如何使用 Draggable 进行此操作的示例。以下是可拖动项的解决方法示例:
http://jsfiddle.net/TqUeS/660/
var zoom = $('#canvas').css('zoom');
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();
$('.dragme').draggable({
drag: function(evt,ui)
{
// zoom fix
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
// don't let draggable to get outside of the canvas
if (ui.position.left < 0)
ui.position.left = 0;
if (ui.position.left + $(this).width() > canvasWidth)
ui.position.left = canvasWidth - $(this).width();
if (ui.position.top < 0)
ui.position.top = 0;
if (ui.position.top + $(this).height() > canvasHeight)
ui.position.top = canvasHeight - $(this).height();
}
});
我希望在可排序版本中 Drag 事件被 Sort 事件替换,但正如您从下面的 fiddle 中看到的那样,它不起作用。在 sort 事件中设置 ui.position 没有任何效果 - 它似乎设置它并在事件触发后丢弃它。
http://jsfiddle.net/TqUeS/658/
var zoom = $('#canvas').css('zoom');
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();
$('#canvas').sortable({
items: "div",
sort: function(evt,ui)
{
// zoom fix
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
// don't let draggable to get outside of the canvas
if (ui.position.left < 0)
ui.position.left = 0;
if (ui.position.left + $(this).width() > canvasWidth)
ui.position.left = canvasWidth - $(this).width();
if (ui.position.top < 0)
ui.position.top = 0;
if (ui.position.top + $(this).height() > canvasHeight)
ui.position.top = canvasHeight - $(this).height();
}
});
如果有人有其他解决方法,我很乐意听到。
最佳答案
可拖动和可排序之间的细微差别。在某种程度上,ui.helper
是项目,position
不会以同样的方式影响它,它只是它的位置的报告。
对于Draggable,在ui.position
的drag
中,它指出:
Current CSS position of the helper as
{ top, left }
object. The values may be changed to modify where the element will be positioned. This is useful for custom containment, snapping, etc.
对于 Sortable,在 sort
的 ui.position
中,它指出:
The current position of the helper represented as
{ top, left }
.
试试这个:
示例:http://jsfiddle.net/Twisty/4nv60ob9/2/
HTML
<div id="canvas" data-zoom="0.5">
<div class="dragme"></div>
<div class="dragme"></div>
<div class="dragme"></div>
</div>
<div id="report"></div>
JavaScript
var zoom = $("#canvas").data("zoom");
console.log(typeof zoom, zoom.toString());
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();
$('#canvas').sortable({
items: "div",
start: function(e, ui) {
console.log("Sort Start Triggered");
},
sort: function(evt, ui) {
console.log("Sort Triggered");
// zoom fix
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
$("#report").html("Top: " + ui.position.top + " Left: " + ui.position.left);
// don't let draggable to get outside of the canvas
if (ui.position.left < 0) {
ui.helper.css("left", 0);
}
if (ui.position.left + ui.helper.width() > canvasWidth) {
ui.helper.css("left", (canvasWidth - ui.helper.width()) + "px");
}
if (ui.position.top < 0) {
ui.helper.css("top", 0);
}
if (ui.position.top + ui.helper.height() > canvasHeight) {
ui.helper.css("top", (canvasHeight - ui.helper.height()) + "px");
}
$("#report").html("Top: " + (canvasHeight - ui.helper.height()) + " Left: " + (canvasWidth - ui.helper.width()));
}
});
我认为这也是一样的。
关于javascript - 如何让 JqueryUI Sortable 与缩放/缩放一起工作 - 鼠标移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34790086/