HTML5原生拖放图像,而不是边框
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");
}
相关文章:
- 如果我在javascript中输入无效的电子邮件或空白,如何显示特定的文本框边框红色
- js代码从jQuery转换为原生代码
- jQuery动画-边框宽度和颜色
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- 边框颜色是't如果输入为空,则更改
- Chrome原生拖放相对容器并不能正确渲染重影
- 原生脚本无限翻译动画
- HighCharts:3D柱形图在选择时更改边框颜色
- 在mouseover上添加边框,在mouseout上删除边框
- 如何通过JQuery触发JS原生甚至addEventListener(“change”,函数)
- 在不更改边框颜色的情况下更改文本的颜色
- 使用CSS将圆移动到边框顶部
- 调整UIWebview的大小'更改其字体大小时的边框
- jQuery $.data() 函数的香草替代品:任何原生 JavaScript 替代品
- 如果值为空或0,如何更改html select标记的边框颜色
- 如果键入文本,请更改输入边框颜色
- Node.js Mongodb原生驱动程序连接共享
- Node.js Mongodb 原生驱动组织
- 如何在 javascript 中添加和删除图像上的边框
- HTML5原生拖放图像,而不是边框