jquery - Jquery在html画布上拖放

Question

您好我正在尝试将它从 div （ li 项目）拖到 html 画布上。我对助手克隆有疑问。

当我只是在没有助手的情况下拖动项目时，它会将其拖放到画布上，但是当我使用助手克隆时，它不会将项目拖放到画布上。我附上了小提琴，请检查一下。

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

$("#drag li").draggable({
    helper: 'clone'
});

JS小提琴

提前致谢。

Answer 1

如果要在画布上打印该文本，则需要使用 jQuery droppable 方法，

检查这个小提琴

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