为什么 jquery sortable 不适用于画布？

Question

我有两个容器 sortable1 和 sortable2 并且都有多个画布。我正在使用 jquery 可排序插件将画布的位置从一个容器更改为另一个容器或在同一容器内，代码是：

$( function() {
    $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".sortable_card",
        appendTo:".column_box_one",
        helper: "clone",
    }).disableSelection();
}); 

当我移动画布以更改位置时，它会移动而没有图像和文本内容，所以有人可以建议如何修复它吗？实际上我想克隆画布而不会在排序过程中丢失任何数据。

谢谢

Answer 1

没有示例，我尝试按照您的描述复制问题。我构建了以下基本示例：

$(function() {
  function draw(cObj, cA, cB) {
    var ctx = cObj[0].getContext('2d');
    ctx.fillStyle = cA;
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillStyle = cB;
    ctx.fillRect(30, 30, 50, 50);
  }

  draw($("#canvas-1"), "rgb(255,0,0)", "rgba(0,255,0,0.5)");
  draw($("#canvas-2"), "rgb(0,255,0)", "rgba(0,0,255,0.5)");
  draw($("#canvas-3"), "rgb(0,0,255)", "rgba(255,0,0,0.5)");
  draw($("#canvas-4"), "rgb(0,255,0)", "rgba(255,0,0,0.5)");
  draw($("#canvas-5"), "rgb(255,0,0)", "rgba(0,0,255,0.5)");
  draw($("#canvas-6"), "rgb(0,0,0)", "rgba(20,20,20,0.5)");
  draw($("#canvas-7"), "rgb(20,20,20)", "rgba(40,40,40,0.5)");
  draw($("#canvas-8"), "rgb(40,40,40)", "rgba(60,60,60,0.5)");
  draw($("#canvas-9"), "rgb(60,60,60)", "rgba(80,80,80,0.5)");

  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
});

#sortable1,
#sortable2 {
  border: 1px solid #eee;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
  width: 105px;
}

#sortable1 li,
#sortable2 li {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default"><canvas id="canvas-1" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-2" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-3" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-4" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-5" width="100" height="100"></canvas></li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-default"><canvas id="canvas-6" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-7" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-8" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-9" width="100" height="100"></canvas></li>
</ul>

这没有问题，并且不会复制您所描述的内容。然后我添加了helper: "clone" 选项，我可以立即看到帮助程序不包含上下文，因为它只是画布容器的克隆，而不是上下文。

我们需要一个函数来读取上下文并将其添加到我们的克隆中。

一个函数，它将返回一个 DOMElement 以在拖动时使用。该函数接收事件和被排序的元素。

来源：Helper | Sortable Widget | jQuery UI API Documentation

$(function() {
  function draw(cObj, cA, cB) {
    var ctx = cObj[0].getContext('2d');
    ctx.fillStyle = cA;
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillStyle = cB;
    ctx.fillRect(30, 30, 50, 50);
  }

  function clone(cObj, aObj) {
    if (aObj == undefined) {
      aObj = {};
    }
    var newCanvas = $("<canvas>").attr(aObj).prop({
      width: cObj.width(),
      height: cObj.height()
    });
    var ctx = newCanvas[0].getContext("2d");
    ctx.drawImage(cObj[0], 0, 0);
    return newCanvas;
  }

  draw($("#canvas-1"), "rgb(255,0,0)", "rgba(0,255,0,0.5)");
  draw($("#canvas-2"), "rgb(0,255,0)", "rgba(0,0,255,0.5)");
  draw($("#canvas-3"), "rgb(0,0,255)", "rgba(255,0,0,0.5)");
  draw($("#canvas-4"), "rgb(0,255,0)", "rgba(255,0,0,0.5)");
  draw($("#canvas-5"), "rgb(255,0,0)", "rgba(0,0,255,0.5)");
  draw($("#canvas-6"), "rgb(0,0,0)", "rgba(20,20,20,0.5)");
  draw($("#canvas-7"), "rgb(20,20,20)", "rgba(40,40,40,0.5)");
  draw($("#canvas-8"), "rgb(40,40,40)", "rgba(60,60,60,0.5)");
  draw($("#canvas-9"), "rgb(60,60,60)", "rgba(80,80,80,0.5)");

  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    helper: function(e, item) {
      var li = $("<li>").css("border", "1px solid #000");
      var newCan = clone($("canvas", item));
      li.append(newCan);
      return li[0];
    }
  }).disableSelection();
});

#sortable1,
#sortable2 {
  border: 1px solid #eee;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
  width: 105px;
}

#sortable1 li,
#sortable2 li {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default"><canvas id="canvas-1" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-2" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-3" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-4" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-5" width="100" height="100"></canvas></li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-default"><canvas id="canvas-6" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-7" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-8" width="100" height="100"></canvas></li>
  <li class="ui-state-default"><canvas id="canvas-9" width="100" height="100"></canvas></li>
</ul>

现在我们有了一个合适的助手。助手仅在排序期间存在，并在列表更新后被销毁。您将需要评估从源列表中完全“克隆”项目的导入方式，因为它不像可拖动的那样留在原始列表中。 Sortable 与它有不同的逻辑，其设计理念是您将项目移动到列表（或另一个列表）中的另一个位置，并且不想要一个挥之不去的克隆。

如果它真的很重要，请考虑从 Draggable 开始并拖入 Sortable。如果您需要两者都是可排序的，则必须使用 start、stop 和 update 来创建、克隆并将项目重新附加到开头，使其在原始列表中的正确位置.说起来容易做起来难。

希望对你有所帮助。