<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
img{width:100px;height:100px}
</style>
<div id="src">
<img draggable="true" src="a.jpg" id="a"/>
<img draggable="true" src="b.jpg" id="b"/>
<img draggable="true" src="c.jpg" id="c"/>
<img draggable="true" src="d.jpg" id="d"/>
</div>
<div id="target" style="border-style:solid;width: 300px; height: 400px; margin-top:20px">
<p>将图片拖拽到这里</p>
</div>
<span id="msg"></span>
<script>
var src=document.getElementById("src");
var target=document.getElementById("target");
var msg=document.getElementById("msg");
var draggedID;
src.ondragstart=function (e)//开始拖拽元素时触发
{
draggedID=e.target.id;//获取拖拽对象ID
msg.innerHTML="开始拖拽"+draggedID;
}
/* src.ondrag=function(e)
{
msg.innerHTML="正在拖拽"+draggedID;
}
target.ondragenter=function (e)
{
msg.innerHTML=draggedID+"已进入目的元素";
e.preventDefault();
}
*/
target.ondragover=function (e)
{
msg.innerHTML=draggedID+"正在目的元素内移动";
e.preventDefault();
}
target.ondragleave=function(e)
{
msg.innerHTML=draggedID+"已离开目的元素";
}
src.ondragend=function(e)
{
msg.innerHTML="结束拖拽";
}
target.ondrop=function(e)
{
var newElem=document.getElementById("draggedID").cloneNode(false);
msg.innerHTML=" ";
target.appendChild(newElem);
e.preventDefault();
}
</script>
<body>
</body>
</html>
拖拽图片 target.ondrop没反应
html5 拖拽图片 target.ondrop没反应
第1个回答 2016-05-23
首先,引入类库,你的dragstart和其它几个action都没有定义,如果类库里有,引一下本回答被提问者和网友采纳
第2个回答 2019-07-26
朋友，你的src.ondragstart设置的是div的事件，但是div又没有设置draggable="true"
