1

こんにちは、div (li 項目) から HTML キャンバスに itms をドラッグしようとしています。ヘルパー クローンに問題があります。

ヘルパーなしでアイテムをドラッグすると、アイテムがキャンバスにドロップされますが、ヘルパー クローンを使用するとアイテムがキャンバスにドロップされません。フィドルを添付しましたのでご確認ください。

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 に答える