JS拖拽图片简单例子

来源：互联网发布：板式家具开料软件编辑：程序博客网时间：2024/06/09 22:10

Reference: http://w3schools.bootcss.com/jsref/dom_obj_event.html

在H5中所有的元素都是可以被拖拽的, 通过给元素添加draggable="true"属性.

相关的地方:
1. ondragover 事件发生在: 元素拖拽到拖放的目标元素之上时.(事件处理程序多次调用)
2. ondragstart 事件发生在: 元素开始拖拽之时(事件处理程序1次调用)
3. ondrop 事件发生在: 被拖拽的元素完成拖放到目标元素盒子区域这一动作.(事件处理程序1次调用)
4. 事件的默认行为, 比如说在复选框上点击按钮会发生选中或取消选中事件. 这里需要在ondragover事件里阻止浏览器默认打开的行为.
5. dataTransfer对象. 在进行拖放操作时，进行数据的存储, 这个对象也保存了拖拽元素的数据.

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>JS拖拽图片简单例子</title>    <style type="text/css">        .drop-target {            border: 1px solid black;            width: 300px;            height: 300px;        }        img#img {            width: 200px;            height: 200px;        }    </style>    <script type="text/javascript">        function allowDrop(e) {            e.preventDefault();        }        function dragStart(event) {            var dataTransfer = event.dataTransfer;            dataTransfer.setData("id", event.target.id);        }        function drop(event) {            var dataTransfer = event.dataTransfer;            var imgId = dataTransfer.getData("id");            var img = document.getElementById(imgId);            var div = event.target;            div.appendChild(img);        }    </script></head><body><div class="drop-target" ondragover="allowDrop(event)" ondrop="drop(event)">请将图片拖放到这里来.</div><img id="img" ondragstart="dragStart(event)" src="http://al0n4k.com/favicon.jpg" draggable="true"></body></html>

在ondragstart那里获取图片的id属性值, 然后在drop方法里获取属性值获取图片对象, 接着添加到div里即可. 在ondragover事件里做处理操作, 让div取消默认行为, 接受图片的放入.

另外, event对象的两次target分别是被拽放对象img和拖放接受对象div.

0 0