Jquery在htmlcanvas上拖放

您好我正在尝试将div（div项目）中的itms拖到htmlcanvas上。 我有帮助克隆的问题。

当我简单地拖动没有帮助器的项目时，它将itms拖放到canvas上，但是当我使用帮助器克隆时，它不会将项目拖放到canvas上。 我附上了小提琴，请检查一下。

HTML

 
Drag me down1
 
Drag me down2
 
Drag me down3
 
  

JS

 $("#drag li").draggable({ helper: 'clone' }); 

JS FIDDLE

提前致谢。

Answer 1

如果要在canvas上打印该文本，则需要使用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); } });