本文摘自PHP中文网,作者V,侵删。
具体方法如下:
1、对象元素的draggable属性设置为true(draggable="true")。还需要注意的是a元素和img元素必须指定href;
2、编写拖拽有关的事件处理代码:
(学习视频分享:html视频教程)
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)未拖放之前:
(2)拖放之后
相关推荐:html5教程
以上就是利用html5实现简单的拖动功能的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5编码怎么设置
HTML5原生拖拽操作实例讲解
html如何定义错误提示
利用HTML5 实现3d 网络拓扑树(图文详解)
HTML5的学习路线分析
详细介绍7款炫酷的HTML5 canvas动画特效
h5移动端各种各样的列表的制作方法(一)
如何区别HTML5离线存储和本地缓存实例详解
HTML5的优势有哪些
HTML5画布的详细介绍
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 利用html5实现简单的拖动功能