[英]HTML5 Native drag and drop on image as opposed to border?
我已经在一组图像上实现了拖放功能。 我遇到的问题是,仅当我从图片边框拖动时才起作用,而不是图片本身?
我已经尝试了各种方法,但是似乎没有用。 如果我将图片放在不正确的地方,这也将变为裁剪框。
<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>
实际上,当您将鼠标指针放在图像上时,它正在考虑图像事件,并且您已经完成了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");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.