我搜索了很多,但我找不到与我的需求相关的场景。我想将图像从工具栏拖放到画布,而不是从画布拖放到另一个画布。
请帮我解决这个问题。提前致谢
答案 0 :(得分:4)
演示:http://jsfiddle.net/m1erickson/2Us2S/
使用jquery-ui创建可拖动元素。
$("#myToolbarImageElement").draggable();
使用作为键值对的数据有效负载加载这些元素。
在您的情况下,这可能是您想要在画布上绘制的图像对象。
$("#myToolbarImageElement").data("image",myImageObject);
将画布设置为放置区:
$("#myCanvas").droppable({drop:myDropHandler});
当您在画布上放置元素时,您可以读取数据(图像)并将该图像drawImage到画布。
function myDropHandler(e,ui){
var x = ui.offset.left - $("#myCanvas").offset.left;
var y = ui.offset.top - $("#myCanvas").offset.top;
var image = ui.draggable.data("image");
// draw on canvas
drawImage(image,x,y);
}
这是一个关于使用jquery-ui的数据有效负载的拖放元素的精彩教程:
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/