Question

＆lt; p＆gt;我试图让Jquery UI Sortable与zoom一起使用。问题是鼠标的移动速度与您拖动的元素的移动速度不同。有很多关于如何使用Draggable进行此操作的示例。以下是可拖动项目的变通方法示例：＆lt; / p＆gt; ＆lt; p＆gt;＆lt; a href =＆＃34; http：//jsfiddle.net/TqUeS/660/"的rel =＆＃34; noreferrer＆＃34;＆GT; HTTP：//jsfiddle.net/TqUeS/660/< / A＆GT;＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt; var zoom = $（＆＃39;＃canvas＆＃39;）。css（＆＃39; zoom＆＃39;）; var canvasHeight = $（＆＃39;＃canvas＆＃39;）。height（）; var canvasWidth = $（＆＃39;＃canvas＆＃39;）。width（）; $（＆＃39; .dragme＆＃39）。可拖动（{ 拖动：函数（evt，ui） { //缩放修复 ui.position.top = Math.round（ui.position.top / zoom）; ui.position.left = Math.round（ui.position.left / zoom）; //不要让拖车离开画布 if（ui.position.left＆lt; 0） ui.position.left = 0; if（ui.position.left + $（this）.width（）＆gt; canvasWidth） ui.position.left = canvasWidth - $（this）.width（）; if（ui.position.top＆lt; 0） ui.position.top = 0; if（ui.position.top + $（this）.height（）＆gt; canvasHeight） ui.position.top = canvasHeight - $（this）.height（）; } }）; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;我希望将Drag事件替换为Sortable版本中的Sort事件，但正如您从下面的小提琴中看到的那样，它不起作用。在sort事件中设置ui.position没有任何效果 - 似乎设置它并在事件触发后丢弃它。＆lt; / p＆gt; ＆lt; p＆gt;＆lt; a href =＆＃34; http：//jsfiddle.net/TqUeS/658/"的rel =＆＃34; noreferrer＆＃34;＆GT; HTTP：//jsfiddle.net/TqUeS/658/< / A＆GT;＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt; var zoom = $（＆＃39;＃canvas＆＃39;）。css（＆＃39; zoom＆＃39;）; var canvasHeight = $（＆＃39;＃canvas＆＃39;）。height（）; var canvasWidth = $（＆＃39;＃canvas＆＃39;）。width（）; $（＆＃39;＃画布＆＃39）。可排序（{ 项目：＆＃34; div＆＃34;， sort：function（evt，ui） { //缩放修复 ui.position.top = Math.round（ui.position.top / zoom）; ui.position.left = Math.round（ui.position.left / zoom）; //不要让拖车离开画布 if（ui.position.left＆lt; 0） ui.position.left = 0; if（ui.position.left + $（this）.width（）＆gt; canvasWidth） ui.position.left = canvasWidth - $（this）.width（）; if（ui.position.top＆lt; 0） ui.position.top = 0; if（ui.position.top + $（this）.height（）＆gt; canvasHeight） ui.position.top = canvasHeight - $（this）.height（）; } }）; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;如果有人有另一种解决方法，我很乐意听到它。＆lt; / p＆gt;

Answer 1

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

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

帮助程序的当前CSS位置为{ top, left }对象。可以更改这些值以修改元素的位置。这对于自定义包含，捕捉等非常有用。

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

助手的当前位置表示为{ 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()));
  }
});

我认为这是以同样的方式运作。

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

1 个答案: