Javascript 如何使用缩放/缩放鼠标移动使JqueryUI可排序

我正在尝试让Jquery UI可以使用缩放进行排序。问题是鼠标的移动速度与拖动的图元的移动速度不同。关于如何使用Draggable实现这一点，已经发布了很多示例。以下是可拖动项的解决方法示例：

var zoom=$（'#canvas'）.css（'zoom'）；
var canvasHeight=$（'#canvas'）.height（）；
var canvasWidth=$（'#canvas'）.width（）；
$（'.dragme'）。可拖动({
拖动：函数（evt、ui）
{
//缩放定位
ui.position.top=Math.round（ui.position.top/zoom）；
ui.position.left=数学圆整（ui.position.left/缩放）；
//不要让draggable离开画布
如果（ui.position.left<0）
ui.position.left=0；
if（ui.position.left+$（this.width（）>canvasWidth）
ui.position.left=画布宽度-$（this.width（）；
如果（ui.position.top<0）
ui.position.top=0；
if（ui.position.top+$（this.height（）>画布高度）
ui.position.top=画布高度-$（this.height（）；
}                 
});

在这个可排序版本中，我希望Drag事件被Sort事件替换，但正如您从下面的提琴中看到的，它不起作用。在排序事件中设置ui.position没有任何效果-它似乎设置了ui.position，并在事件触发后丢弃它

var zoom=$（'#canvas'）.css（'zoom'）；
var canvasHeight=$（'#canvas'）.height（）；
var canvasWidth=$（'#canvas'）.width（）；
$（'#canvas'）。可排序({
项目：“div”，
排序：函数（evt、ui）
{
//缩放定位
ui.position.top=Math.round（ui.position.top/zoom）；
ui.position.left=数学圆整（ui.position.left/缩放）；
//不要让draggable离开画布
如果（ui.position.left<0）
ui.position.left=0；
if（ui.position.left+$（this.width（）>canvasWidth）
ui.position.left=画布宽度-$（this.width（）；
如果（ui.position.top<0）
ui.position.top=0；
if（ui.position.top+$（this.height（）>画布高度）
ui.position.top=画布高度-$（this.height（）；
}                 
});

---

如果有人有其他解决方法，我很乐意听到。

可拖动和可排序之间的细微差别。在排序中，

ui.helper

是项目，

position

不会以同样的方式影响它，它只是它位置的一个报告

对于可拖动，在

ui.position

的

拖动中指出：

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

对于可排序，在
ui.position
的
sort
中指出：

辅助对象的当前位置表示为
{top，left}

试试这个：

例如：

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

var zoom=$（“#画布”）.data（“zoom”）；
log（typeof zoom，zoom.toString（））；
var canvasHeight=$（'#canvas'）.height（）；
var canvasWidth=$（'#canvas'）.width（）；
$（'#canvas'）。可排序({
项目：“div”，
开始：功能（e、ui）{
日志（“排序启动触发”）；
},
排序：函数（evt、ui）{
控制台日志（“排序触发”）；
//缩放定位
ui.position.top=Math.round（ui.position.top/zoom）；
ui.position.left=数学圆整（ui.position.left/缩放）；
$（“#报告”）.html（“顶部：+ui.position.Top+”左侧：+ui.position.Left”）；
//不要让draggable离开画布
如果（ui.position.left<0）{
css（“左”，0）；
}
if（ui.position.left+ui.helper.width（）>canvasWidth）{
css（“左”，（canvasWidth-ui.helper.width（））+“px”）；
}
如果（ui.position.top<0）{
css（“top”，0）；
}
if（ui.position.top+ui.helper.height（）>canvasHeight）{
css（“top”，（canvasHeight-ui.helper.height（））+“px”）；
}
$（“#报告”）.html（“顶部：+（canvashight-ui.helper.height（））+”左侧：+（canvashwidth-ui.helper.width（））；
}
});

我想这也是同样的道理。
当我使用可拖动设备进行测试时，设备会向每个角落推进。这是预期的活动吗？它似乎在sortable中运行良好。也许我没有看到整个问题。在这里测试：如果我将
$（“#canvas”）.css（“zoom”）
替换为
0.5
，我得到的是实际值，而不是
NaN
或
Infinity
。它将其作为值为“”的字符串读取。正在修复。@Twisty，看看我说的鼠标不同步是什么意思。在我看来，它也在做同样的事情——基本上，问题是鼠标没有与可排序的项目保持同步——它通常会向前移动。我看到您将
ui.position
更改为
ui.helper
——但在jfiddle中，鼠标仍然从可排序项移开。@user1274820我不确定我是否明白您的意思。@user1274820这比您提供的小示例复杂得多。是否需要项目仅沿Y轴移动？如果是，您可能需要考虑<代码>轴>代码>选项。我会做更多的测试。你能澄清一下你的测试环境吗，Chrome？火狐？具体版本？手机？嘿，Twisty，请注意，我不是最初的海报-只是一个人谁坏死了这个。我一直在测试铬。真正需要做的就是找到一种方法来设置项目的位置。使用
拖动
，它看起来像是
用户界面。位置
可以工作，但由于某种原因，它在
排序
功能中不起作用。@user1274820我的道歉。咖啡不够<代码>用户界面。拖动
中的位置
会影响该位置<代码>用户界面。
排序
中的位置

没有相同的功能。我们可以使用css顶部和左侧，或者

上的
位置（）
<div id="canvas" data-zoom="0.5">
  <div class="dragme"></div>
  <div class="dragme"></div>
  <div class="dragme"></div>
</div>
<div id="report"></div>

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