Question

检查此fiddle.

我们可以将“Drag me downX”线拖放到画布div中;文本行将保留在那里，而鼠标后面会有半透明的文本行。我希望将相同的效果拖动到画布的 out 行。然而，一旦文本被放入画布中，它就无法移动。我怎样才能实现上述目标（它具有与上述相同的效果非常重要）？

HTML

  <ul id="drag">
     <li class="new-item">Drag me down1</li>
     <li class="new-item">Drag me down2</li>
     <li class="new-item">Drag me down3</li>
  </ul>    

  <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>

JS

 $("li").draggable({
    helper: 'clone'
 });
 $("#myCanvas").droppable({
    accept: "li",
    drop: function(event, ui) {
       var context = $(this)[0].getContext("2d");
       context.font = "16px helvetica";
       context.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop);
    }
 });

CSS

 li{
    font-family:helvetica;
    list-style-type:none;
 }

Answer 1

将元素放到<canvas>上后，当文本被栅格化时，它就失去了所有意义。因此，没有办法得到文本。您可以做的最好的事情是将拖动标签的不可见副本附加到画布上，然后每当画布中出现任何拖动事件时，弹出一个元素并将其拖动到您想要的位置。但是，这不会为您提供您想要的确切标记。

如果您真的在寻找挑战，可以看一下这个问题，即在光栅化后选择画布中的文本。 How to Make Canvas Text Selectable?

Answer 2

我认为可能存在一个问题，因为它基本上是一个被拖放的元素。我创建了一个隐藏的画布，并将原始画布叠加在新画布上。当触发拖动事件时，隐藏的画布将放置在更高的z-index上，并获取要传递给原始画布的坐标信息。

如何从画布拖动图像？

2 个答案: