HTML5将图像从工具栏拖放到画布

我已经搜索了很多，但我找不到与我的需求相关的场景。我想将图像从工具栏拖放到画布，而不是从画布拖放到另一画布

请帮我做这个。提前感谢演示：

使用jquery ui创建可拖动的元素

$("#myToolbarImageElement").draggable();

使用数据有效负载加载这些元素，这些数据有效负载是键值对

在您的情况下，这可能是您希望在画布上绘制的图像对象

$("#myToolbarImageElement").data("image",myImageObject);

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

将画布设置为放置区域：

$("#myCanvas").droppable({drop:myDropHandler});

当您将元素放到画布上时，您可以读取数据（图像）并将该图像绘制到画布上

$("#myToolbarImageElement").data("image",myImageObject);

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使用数据有效载荷拖放元素的精彩教程：

---

非常感谢。你能帮我让它更像一个工作流吗？我可以用箭头连接这些图像，就像你知道的那些连接点一样，还可以改变画布上拖动项目的位置？在这种情况下，当拖动到画布上时，它有点像静态的？这里有一个关于在可拖动画布矩形之间创建连接器的链接：这应该让您开始。祝你的项目好运！您好，我使用了上面的示例，我可以进行拖放，但只能进行一次，我需要在用户拖动图像时进行多次拖放，并且我使用了jquery ui clone属性，一旦拖放到画布上，我就无法将其拖到画布上。。你能帮我吗？@markE如何制作一个能与触摸屏一起工作的版本。我不能让那个部分工作。触摸屏拖放是一个完全不同的问题。您可能会问一个带有“jquery mobile”标记的新问题。