html5拖放

【HTML5】

下载

新闻

文章

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5节点拖放</title>
    <style type="text/css">
        .div{width:300px;height:100px;border:1px solid #aaa;float: left}
    </style>
</head>
<body>
<script type="text/javascript">
    //被拖动节点必须添加draggable="true"属性
    function dragover(ev){
        ev.preventDefault();//阻止浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开，经测试FF仍会打开链接）
    }
    function dragstart(ev){
        ev.dataTransfer.setData("data",ev.target.id);//存储对象变量
    }
    function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("data");//读取对象变量
        ev.target.appendChild(document.getElementById(data));//在对象内生成子节点，完成拖放
    }
</script>
<div class="div" ondrop="drop(event)" ondragover="dragover(event)"></div>
<div class="div" ondrop="drop(event)" ondragover="dragover(event)"></div>
<img id="drag" draggable="true" ondragstart="dragstart(event)" src="http://www.scscms.com/scs_img/logo.png"  />
</body>
</html>