HTML5拖动
来源:互联网 发布:查理斯特亚斯 知乎 编辑:程序博客网 时间:2024/06/01 08:08
1.
<style type="text/css">#div1, #div2 <!--定义两个装图片的盒子的大小和位置-->{float:left; width:100px; height:35px; margin:10px;border:1px solid #aaaaaa;}</style><script>function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body ><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">//拖动时组织浏览器默认行为 <img src="../images/1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div>//设置被拖数据的数据类型和值,drag(event)<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
解析:
为了使图像能够被拖动,设置draggable属性为true
当放置被拖动数据时,会发生drop事件,进入函数。preventDefault()来避免浏览器对数据的默认处理(默认以链接的形式打开)
通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素(目标元素)中
0 0
- HTML5 拖动
- HTML5拖动
- HTML5之拖动图片
- HTML5拖动div
- Html5实现拖动效果
- HTML5 拖动实例
- HTML5拖动技术
- html5元素拖动
- html5元素拖动
- HTML5 元素拖动
- html5拖动事件
- [html5]表格拖动
- HTML5学习(1) 模块拖动
- HTML5之鼠标拖动图片
- 基于jquery的html5简单拖动插件
- HTML5实现网页元素的拖动操作
- HTML5元素之间的拖动-----dataTransfer学习
- 使用Html5和Js进行拖动
- WCF 中DataTable序列化失败
- 【公告】博客新皮肤上线啦
- nodejs到底做什么
- Java常用的任务调度实现方式
- 获取一个数字的最高位的几种算法。
- HTML5拖动
- tcpdump抓包分析TCP三次握手过程
- 图片缓存之内存缓存技术LruCache,软引用(A)
- Preference 使用小结
- path与classpath区别
- mysql中文乱码问题——命令行设置编码格式
- Kodi ——6 Controls (1)
- xfire webservice
- 最快过桥问题—题解