他のウェブブラウザから画像をドラッグした後に画像が変更されない

写真や画像をクリックしてドラッグして子画像に置き換えようとしましたが、画像のリンクにリダイレクトされました。どうすれば修正できますか？コードは、私をリンクにリダイレクトするのではなく、画像を変えるようになっています。他のウェブブラウザから画像をドラッグした後に画像が変更されない

<!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

他のウェブブラウザから画像をドラッグした後に画像が変更されない

答えて

関連する問題