JS实现多个div块之间相互拖放,调换位置
2015-07-01 14:47
627 查看
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } var srcdiv = null; function drag(ev,divdom) { srcdiv=divdom; ev.dataTransfer.setData("text/html",divdom.innerHTML); } function drop(ev,divdom) { ev.preventDefault(); if(srcdiv != divdom){ srcdiv.innerHTML = divdom.innerHTML; divdom.innerHTML=ev.dataTransfer.getData("text/html"); } } </script> </head> <body> <div id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> <p>ni hao!</p> </div> <div id="div2" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> <p>Hello world!</p> </div> </body> </html>
上面是代码,保存为html,然后用浏览器打开,可以查看效果。
简要说一下,上面的函数:
ondrop: 拖到目的地放下之后要做的处理,这里自定义drop(event,this)函数,互换两个的innerHTML
ondragover:当拖动链接等有默认事件的元素时,要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。
draggable:允许拖动
ondragstart:选取拖动目标要做的处理,这里保存拖动目标的innerHTML.
相关文章推荐
- javascript使用table排序
- js的Math函数
- JSF 的xtml 声明格式例
- JSTL标签用法 详解
- Gruntfile.js详解
- JS中的定时器
- [js][有趣的问题]add(2)(3)(7)
- js 60秒倒计时
- JQ通过$()获得的对象与JS语句获得的对象的区别
- JS 键值对
- 关于JS的prototype
- JS随机调用指定函数的方法
- JavaScript每天定时更换皮肤样式的方法
- JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
- JavaScript判断数组是否包含指定元素的方法
- JavaScript -- 使用JavaScript生成JSON格式的字符串
- 在JavaScript应用中使用RequireJS来实现延迟加载
- 使用RequireJS优化JavaScript引用代码的方法
- 常用的navigator属性
- 处理json中影响解析的多余引号