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


本文摘自PHP中文网,作者V,侵删。

具体方法如下:

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

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

(学习视频分享:html视频教程)

b9ddad8d9029238ed985b6f7f46f9d3.png

3、案例实现代码:

(1)HTML代码段:

1

2

3

<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)"/>

(2)CSS代码段:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#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代码段:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function allowDrop(ev){

    //不执行默认处理(拒绝被拖放)

    ev.preventDefault();

};

function drag(ev){

    //使用setData(数据类型,携带的数据)

    //方法将要拖放的数据存入dataTransfer对象

    ev.dataTransfer.setData("Text",ev.target.id);

};

function drop(ev){

    //不执行默认处理(拒绝被拖放)

    ev.preventDefault();

    //使用getData()获取到数据,然后赋值给data

    var data = ev.dataTransfer.getData("Text");

    //使用appendChild方法把拖动的节点放到元素节点中成为其子节点

    ev.target.appendChild(document.getElementById(data));

};

4、实现的效果如下:

(1)未拖放之前:

8e1c9d0ac33f47a2e91cc0ea597e485.png

(2)拖放之后

aea426f98d5de53098d8a9a8930b242.png

相关推荐:html5教程

以上就是利用html5实现简单的拖动功能的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5编码怎么设置

HTML5原生拖拽操作实例讲解

html如何定义错误提示

利用HTML5 实现3d 网络拓扑树(图文详解)

HTML5的学习路线分析

详细介绍7款炫酷的HTML5 canvas动画特效

h5移动端各种各样的列表的制作方法(一)

如何区别HTML5离线存储和本地缓存实例详解

HTML5的优势有哪些

HTML5画布的详细介绍

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...