动态设置图片可拖动答案

【问题标题】：Set image draggable dynamically动态设置图片可拖动
【发布时间】：2013-03-01 15:19:12
【问题描述】：

我在将图像设置为可拖动时遇到问题。此代码似乎不起作用：

var thumb = document.createElement("img");
thumb.setAttribute('draggable', "true");

我创建图像并将其附加到 DOM，如下所示： var thumb = document.createElement("img");

        thumb.setAttribute('draggable', "true");
        thumb.setAttribute('alt', label);
        thumb.setAttribute('id', "dhmvseries_" + label);
        thumb.setAttribute("dhmvseriesuuid",label);

        thumb.ondragstart =  thumbDragStart;
        thumb.ondragend = thumbDragEnd;
        thumb.onmouseover = displayThumbInfo;
        thumb.onmouseout = hideThumbInfo;

var thinner = createElement("div", "dhThumbImage dhRounded");
thinner.appendChild(thumb);

【问题讨论】：

到目前为止，您尝试或研究了什么来发现问题？你会发布一个 jsfiddle jsfiddle.net 吗？
您是否将元素附加到 DOM 树？你在设置src 属性吗？这里需要更多信息和代码。做一个小提琴。 “此代码似乎不起作用” 比较模糊，您看到了什么以及您希望看到什么？
img默认是可拖拽的，随便随便抓一张就可以移动了。
onmouseover 工作正常，但拖动功能甚至不触发。问题可能出在哪里？

标签： javascript image draggable

【解决方案1】：

我在我正在构建的旨在与闭包编译器一起使用的公共域库中使用这些。

/** drag(node n, property p)
 *  sets dataTransfer text to value of property p when node n is dragged
**/
function drag(n,p){n['draggable']=1
    n['ondragstart']=function(a){a.dataTransfer.setData("Text",a.target?a.target[p]:a.srcElement[p])}}

/** drop(node n, function f)
 *  sets a drop event handler for node n that uses function f as its handler
 *  function f will be passed: the target node and the dataTransfer "Text" value
ex. var f=function(t,s){t.style.backgroundColor=s} //sets background the Text value
 *  * the "Text" is set to the value of property p in the drag event
 *  see drag(node n, property p)
**/
function drop(n,f){n['ondragover']=F
    n['ondrop']=function(a){f(n,a.dataTransfer.getData("Text"))
    return!!0}}

【讨论】：