Jquery拖放在html画布上 [英] Jquery drag drop on html canvas

问题描述

你好我想把它从div（li items）拖到html画布上。我有一个帮助程序克隆的问题。

当我简单地拖动项目没有帮助者，它将itms放在画布上，但是当我使用帮助克隆它不会将项目拖放到画布上。我已经附上一个小提琴，请检查一下。

HTML

  ; ul id =drag> 
< li class =new-item>拖动我down1< / li> 
< li class =new-item>拖动我down2< / li> 
< li class =new-item>拖动我down3< / li> 
< / ul> 
< canvas id =myCanvaswidth =200height =200style =border：1px solid＃000000;>< / canvas> 
  

JS

  $（＃drag li）。draggable（{
 helper：'clone'
}）; 
  

JS FIDDLE

提前感谢

解决方案

如果要在画布上打印该文本，则需要使用jQuery droppable方法，

检查此小提琴

  $（＃myCanvas） （$ {
接受：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）; 
} 
}）; 
  

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.

解决方案

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

这篇关于Jquery拖放在html画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！