如何让JqueryUI Sortable使用缩放/缩放 - 鼠标移动

Question

我试图让Jquery UI Sortable与zoom一起使用.问题是鼠标的移动速度与您拖动的元素的移动速度不同.有很多关于如何使用Draggable进行此操作的示例.以下是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事件替换为Sortable版本中的Sort事件,但正如您从下面的小提琴中看到的那样,它不起作用.在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();  

}                 
});

如果有人有另一种解决方法,我会很高兴听到它.

Answer 1

可拖动和可排序之间的细微差别。在排序上，ui.helper是项目并且position不会以相同的方式影响它，它只是其位置的报告。

对于 Draggable，在dragfor中ui.position，它指出：

帮助器作为{ top, left }对象的当前 CSS 位置。可以更改这些值以修改元素的定位位置。这对于自定义遏制、捕捉等很有用。

对于 Sortable，在sortfor中ui.position，它指出：

助手的当前位置表示为{ top, left }。

尝试这个：

示例： http: //jsfiddle.net/Twisty/4nv60ob9/2/

超文本标记语言

<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()));
  }
});

我认为这也是以同样的方式起作用的。