从其他网络浏览器拖动图像后图像不会改变

我试图点击并拖动照片或图像并放置在小猫图像上，它没有改变，但将我重定向到图像的链接。我该如何解决这个问题？代码应该让图像改变，而不是将我重定向到链接。从其他网络浏览器拖动图像后图像不会改变

<!DOCTYPE html> 
<html> 
<head> 
    <title>Drag and Drop</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script> 

    function dragStart(jQueryEvent) { 
     // Store URL 
     var dataTransfer = document.getElementsByTagName('img'); 
     jQueryEvent.dataTransfer.setData('Text', dataTransfer); 
     // photo being dragged and dropped with <img> tag and set the photo. 
    } 
    function dragOver() { 
     return false; // Indicates that the element can be dropped onto 
    } 
    function drop(jQueryEvent) { 
     // Update image and text box 
     jQueryEvent.preventDefault(); 
     var dataTransfer = jQueryEvent.originalEvent.dataTransfer; 
     document.getElementsByTagName('img').innerHTML = jQueryEvent.dataTransfer.getData('Text');  
    } 

</script> 
</head> 
<body> 
    <input type="text" style="width: 300px" value="http://placekitten.com/320/240" /><br /> 
    <img src="http://placekitten.com/320/240" style="border: 1px solid grey; min-width: 50px; min-height: 50px; display: inline-block;" /> 
</body> 
</html>

来源

2012-03-13 George Lim

使用src属性，而不是innerHTML：

$("img")[0].src = jQueryEvent.dataTransfer.getData('Text');

dragDrop = { 
 
\t keyHTML: '<a href="#" class="keyLink">#</a>', 
 
\t keySpeed: 10, // pixels per keypress event 
 
\t initialMouseX: undefined, 
 
\t initialMouseY: undefined, 
 
\t startX: undefined, 
 
\t startY: undefined, 
 
\t dXKeys: undefined, 
 
\t dYKeys: undefined, 
 
\t draggedObject: undefined, 
 
\t initElement: function (element) { 
 
\t \t if (typeof element == 'string') 
 
\t \t \t element = document.getElementById(element); 
 
\t \t element.onmousedown = dragDrop.startDragMouse; 
 
\t \t element.innerHTML += dragDrop.keyHTML; 
 
\t \t var links = element.getElementsByTagName('a'); 
 
\t \t var lastLink = links[links.length-1]; 
 
\t \t lastLink.relatedElement = element; 
 
\t \t lastLink.onclick = dragDrop.startDragKeys; 
 
\t }, 
 
\t startDragMouse: function (e) { 
 
\t \t dragDrop.startDrag(this); 
 
\t \t var evt = e || window.event; 
 
\t \t dragDrop.initialMouseX = evt.clientX; 
 
\t \t dragDrop.initialMouseY = evt.clientY; 
 
\t \t addEventSimple(document,'mousemove',dragDrop.dragMouse); 
 
\t \t addEventSimple(document,'mouseup',dragDrop.releaseElement); 
 
\t \t return false; 
 
\t }, 
 
\t startDragKeys: function() { 
 
\t \t dragDrop.startDrag(this.relatedElement); 
 
\t \t dragDrop.dXKeys = dragDrop.dYKeys = 0; 
 
\t \t addEventSimple(document,'keydown',dragDrop.dragKeys); 
 
\t \t addEventSimple(document,'keypress',dragDrop.switchKeyEvents); 
 
\t \t this.blur(); 
 
\t \t return false; 
 
\t }, 
 
\t startDrag: function (obj) { 
 
\t \t if (dragDrop.draggedObject) 
 
\t \t \t dragDrop.releaseElement(); 
 
\t \t dragDrop.startX = obj.offsetLeft; 
 
\t \t dragDrop.startY = obj.offsetTop; 
 
\t \t dragDrop.draggedObject = obj; 
 
\t \t obj.className += ' dragged'; 
 
\t }, 
 
\t dragMouse: function (e) { 
 
\t \t var evt = e || window.event; 
 
\t \t var dX = evt.clientX - dragDrop.initialMouseX; 
 
\t \t var dY = evt.clientY - dragDrop.initialMouseY; 
 
\t \t dragDrop.setPosition(dX,dY); 
 
\t \t return false; 
 
\t }, 
 
\t dragKeys: function(e) { 
 
\t \t var evt = e || window.event; 
 
\t \t var key = evt.keyCode; 
 
\t \t switch (key) { 
 
\t \t \t case 37: \t // left 
 
\t \t \t case 63234: 
 
\t \t \t \t dragDrop.dXKeys -= dragDrop.keySpeed; 
 
\t \t \t \t break; 
 
\t \t \t case 38: \t // up 
 
\t \t \t case 63232: 
 
\t \t \t \t dragDrop.dYKeys -= dragDrop.keySpeed; 
 
\t \t \t \t break; 
 
\t \t \t case 39: \t // right 
 
\t \t \t case 63235: 
 
\t \t \t \t dragDrop.dXKeys += dragDrop.keySpeed; 
 
\t \t \t \t break; 
 
\t \t \t case 40: \t // down 
 
\t \t \t case 63233: 
 
\t \t \t \t dragDrop.dYKeys += dragDrop.keySpeed; 
 
\t \t \t \t break; 
 
\t \t \t case 13: \t // enter 
 
\t \t \t case 27: \t // escape 
 
\t \t \t \t dragDrop.releaseElement(); 
 
\t \t \t \t return false; 
 
\t \t \t default: 
 
\t \t \t \t return true; 
 
\t \t } 
 
\t \t dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys); 
 
\t \t if (evt.preventDefault) 
 
\t \t \t evt.preventDefault(); 
 
\t \t return false; 
 
\t }, 
 
\t setPosition: function (dx,dy) { 
 
\t \t dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px'; 
 
\t \t dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px'; 
 
\t }, 
 
\t switchKeyEvents: function() { 
 
\t \t // for Opera and Safari 1.3 
 
\t \t removeEventSimple(document,'keydown',dragDrop.dragKeys); 
 
\t \t removeEventSimple(document,'keypress',dragDrop.switchKeyEvents); 
 
\t \t addEventSimple(document,'keypress',dragDrop.dragKeys); 
 
\t }, 
 
\t releaseElement: function() { 
 
\t \t removeEventSimple(document,'mousemove',dragDrop.dragMouse); 
 
\t \t removeEventSimple(document,'mouseup',dragDrop.releaseElement); 
 
\t \t removeEventSimple(document,'keypress',dragDrop.dragKeys); 
 
\t \t removeEventSimple(document,'keypress',dragDrop.switchKeyEvents); 
 
\t \t removeEventSimple(document,'keydown',dragDrop.dragKeys); 
 
\t \t dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,''); 
 
\t \t dragDrop.draggedObject = null; 
 
\t } 
 
}

参考

来源

2012-09-08 16:04:59

从其他网络浏览器拖动图像后图像不会改变

回答

相关问题