HTML5 如何实现拖拽效果
展开全部
这是一个网友的代码 你可以参考一下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script>
function mstart(a){
//设置初始数据setdata（）
a.dataTransfer.setData("Text",a.target.id);
}
function mover(a){
//把系统默认鼠标或拖拽操作屏蔽掉
a.preventDefault();//屏蔽系统默认的dragover引发的效果
}
function mdrop(a){
a.preventDefault();
var data=a.dataTransfer.getData("Text");
a.target.appendChild(document.getElementById(data));
}
</script>
<body>
<div id="mydiv" style="height:568px; width:500px; border:2px solid" ondragover="mover(event)" ondrop="mdrop(event)"></div>
<img id="myimg1" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)">
<img id="myimg2" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)">
<img id="myimg3" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)">
<br>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script>
function mstart(a){
//设置初始数据setdata（）
a.dataTransfer.setData("Text",a.target.id);
}
function mover(a){
//把系统默认鼠标或拖拽操作屏蔽掉
a.preventDefault();//屏蔽系统默认的dragover引发的效果
}
function mdrop(a){
a.preventDefault();
var data=a.dataTransfer.getData("Text");
a.target.appendChild(document.getElementById(data));
}
</script>
<body>
<div id="mydiv" style="height:568px; width:500px; border:2px solid" ondragover="mover(event)" ondrop="mdrop(event)"></div>
<img id="myimg1" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)">
<img id="myimg2" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)">
<img id="myimg3" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)">
<br>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
