jQuery拖放到HTML画布上

Question

您好，我正在尝试将div从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);
    }
});