Jquery drag drop on html canvas

问题

Hello I am trying to drag itms from a div ( li items) onto a html canvas. I have an issue with helper clone.

When i simply drag items without helper, it drop itms onto canvas, but when i use helper clone it does not drop items onto canvas. I have attached a fiddle please check it.

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 FIDDLE

Thanks in advance.

回答1:

If you want to print that text on canvas, you need to use jQuery droppable method,

check this fiddle

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

来源：https://stackoverflow.com/questions/18961389/jquery-drag-drop-on-html-canvas