CODEWITHSUNDEEP
jqueryhtmldrag-and-drophtml5-canvas
user1409822
user1409822

Reputation: 11

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.

Upvotes: 1

Views: 6771

Answers (1)

Ranganadh Paramkusam
Ranganadh Paramkusam

Reputation: 4368

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);
    }
});

Upvotes: 6

Related Questions