利用html5实现简单的拖动功能

百变鹏仔 3个月前 (10-17) #H5教程

文章标签拖动

具体方法如下：

1、对象元素的draggable属性设置为true(draggable="true")。还需要注意的是a元素和img元素必须指定href；

2、编写拖拽有关的事件处理代码：

（学习视频分享：html视频教程）

立即学习“前端免费学习笔记（深入）”；

3、案例实现代码：

（1）HTML代码段：

<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div><br /><img  src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/ alt="利用html5实现简单的拖动功能" >

（2）CSS代码段：

#tuo{width: 540px;height: 320px;background: #e54d26;}#cun{width: 540px;height: 320px;border: 2px solid #d2d2d2;box-shadow: 1px 4px 8px #646464;}img{width: 500px;height: 280px;}

（3）JavaScript代码段：

function allowDrop(ev){//不执行默认处理（拒绝被拖放）ev.preventDefault();};function drag(ev){//使用setData(数据类型，携带的数据)//方法将要拖放的数据存入dataTransfer对象ev.dataTransfer.setData("Text",ev.target.id);};function drop(ev){//不执行默认处理（拒绝被拖放）ev.preventDefault();//使用getData()获取到数据，然后赋值给datavar data = ev.dataTransfer.getData("Text");//使用appendChild方法把拖动的节点放到元素节点中成为其子节点ev.target.appendChild(document.getElementById(data));};

4、实现的效果如下：

（1）未拖放之前：

（2）拖放之后

文章推荐

利用html5实现简单的拖动功能

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集