1

您好我正在尝试将它从 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小提琴

提前致谢。

4

1 回答 1

6

如果要在画布上打印该文本,则需要使用 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);
    }
});
于 2013-09-24T12:49:11.667 回答