HTML5原生拖放图像而不是边框​​？

Question

我在一组图像上实现了拖放功能。我遇到的问题是，只有当我从图片边框拖动而不是图片本身时它才有效吗？

我尝试了各种各样的东西，但它似乎没有用。如果我将图片放在不正确的位置，这也会改变为裁剪框。

<script type="text/javascript">
var source;
function dragStarted(evt){
//start drag
source=evt.target;
//set data
evt.dataTransfer.setData("image/jpeg", evt.target.innerHTML);
//specify allowed transfer
evt.dataTransfer.effectAllowed = "move";
}



function draggingOver(evt){
//drag over
evt.preventDefault();
//specify operation
evt.dataTransfer.dropEffect = "move";
}

function dropped(evt){
//drop
evt.preventDefault();
evt.stopPropagation();
//update text in dragged item
source.innerHTML = evt.target.innerHTML;
//update text in drop target
 evt.target.innerHTML = evt.dataTransfer.getData("image/jpeg");

}
</script>


<ul class="photos columns-3">

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)"><img src="images/dsc_6001.jpg" width="200" height="200"/></li>

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)"><img src="images/dsc_6013.jpg" width="200" height="200"/></li>

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)"><img src="images/dsc_6081.jpg" width="200" height="200"/></li>

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)"><img src="images/dsc_6268.jpg" width="200" height="200"/></li>

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)"><img src="images/dsc_6345.jpg" width="200" height="200"/></li>

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)"><img src="images/dsc_6378.jpg" width="200" height="200"/></li>

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)"><img src="images/dsc_6397.jpg" width="200" height="200"/></li>

<li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)"><img src="images/dsc_6413.jpg" width="200" height="200"/></li>

    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)"     ondrop="dropped(event)"><img src="images/dsc_6417.jpg" width="200" height="200"/></li>

   </ul>

Answer 1

实际上当你将鼠标指针放在图像上时，它正在考虑图像事件，你已经完成了li标签的代码

您可以尝试使用以下代码进行一些更改：

var source,imgsrc;
dragStarted = function (evt){
    //start drag
    source=evt.target;
    if(evt.target.tagName == "IMG" ) {
        source=evt.target.parentNode;
        imgsrc=source;
    }

    //set data
    evt.dataTransfer.setData("image/jpeg", source.innerHTML);
    //specify allowed transfer
    evt.dataTransfer.effectAllowed = "move";
}



draggingOver = function (evt){
    //drag over
    evt.preventDefault();
    //specify operation
    evt.dataTransfer.dropEffect = "move";
}

dropped = function (evt){
    //drop
    evt.preventDefault();
    evt.stopPropagation();
    imgsrc=evt.target;
    if(evt.target.tagName == 'IMG' ) {
        imgsrc=evt.target.parentNode;
    }
    //update text in dragged item
    source.innerHTML = imgsrc.innerHTML;
    //update text in drop target
     imgsrc.innerHTML = evt.dataTransfer.getData("image/jpeg");

}