您的位置：首页 > 其它

实现网页中元素的拖拽功能

2015-09-23 23:15 393 查看 
<style>
#div1 {width:400px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>

</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>//必须要将div设置一个id
<br />
<p id="drag1" ondragstart="drag(event)" draggable="true">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
<script type="text/javascript">
function allowDrop(e)
{
e.preventDefault();//阻止窗口的默认事件发生
}
function drag(e){
e.dataTransfer.setData("Text",e.target.id);//所有元素均用Text传递值
}
function drop(e){
var data= e.dataTransfer.getData('Text')
e.target.appendChild(document.getElementById(data));//将取出的值存在另一个div中
e.preventDefault();
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航