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

Posted 2023-03-24

【中文标题】HTML5 将图像从工具栏拖放到画布

【英文标题】：HTML5 drag and drop images from a toolbar to a canvas

【发布时间】：2014-03-06 12:47:03

【问题描述】：

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

请帮助我。提前致谢

【参考方案1】：

演示：http://jsfiddle.net/m1erickson/2Us2S/

使用 jquery-ui 创建可拖动元素。

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

使用键值对的数据负载加载这些元素。

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

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

将您的画布设置为拖放区：

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

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

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/

【讨论】：

非常感谢。你能帮我让它更像一个工作流，我可以用箭头连接这些图像，就像你知道那些连接点一样，也可以改变画布上拖动项目的位置？在这种情况下，当拖到画布上时，它有点像静态。 ?

这是在可拖动画布矩形之间创建连接器的链接：***.com/questions/18575006/connect-canvas-with-lines 这应该可以帮助您入门。祝你的项目好运！

嗨，我使用了上面的示例，我可以进行拖放，但它只发生一次，我需要它发生与用户拖动图像一样多的次数，并且我使用了 jquery ui 克隆属性和一旦它掉到画布上，我就无法将它们拖到画布上......你能帮我吗？

@markE 如何制作适用于触摸屏的版本。我无法让那部分工作。

触摸屏拖放是一个完全不同的问题。您可能会使用“jquery-mobile”标签提出一个新问题。