html5拖放--15行js代码实现两个div内容互换
2017-05-23 23:27
351 查看
本文首发于我的个人博客:http://cherryblog.site/ ,欢迎大家前去参观
本文项目地址,sortable插件地址:https://github.com/sunshine940326/sortable
demo地址:https://github.com/sunshine940326/drag
在写我们后台的管理程序中需要有一个拖放的功能,然后我们有一个这样的功能,实现11个固定且大小不一的div互换,效果如下
作为一个小菜鸟,听到这样的消息我是蒙逼的= =,在网上找到一个插件,功能挺强大的
插件地址:https://github.com/sunshine940326/sortable
但是这个插件只能拖动和放置,不能交换,也就是只能将div插入在其他div前面,其余的向后推移,并且不能做到交换div中的内容,而div容器不变的条件,然后我就和其他同事商量了一下交换两个div中的数据要怎么处理,然后同事说这个就比较麻烦了= =。需要写死div,然后先记录鼠标拖动前的div中的内容,然后判断鼠标放下的位置,在哪一个div的范围内,再交换两个的数据= =,真正做起来还不知道有什么坑。听着都怕,于是就暂且搁置了这个功能,直到有一天非做不可了,我百度了一下“怎么交换两个div”,然后找到了一个demo,天啦噜~整个实现过程全部代码50行不到,js代码之后十几行,整个过程不到半个小时就解决了,★,°:.☆( ̄▽ ̄)/$:.°★。撒花!效果如下:
demo地址:https://github.com/sunshine940326/drag
查看代码,发现思路如下:
ondragstart( 用户开始拖动元素时触发)的时候使用该对象的dataTransfer.setData方法,并且用中间量记录点击的div
ondragover (当某被拖动的对象在另一对象容器范围内拖动时触发此事件),拖动div的时候阻止拖动的默认事件(drop 事件的默认行为是以链接形式打开)
ondrop (在一个拖动过程中,释放鼠标键时触发此事件)时候交换两个div的html
百度了一下发现这是html的新特性drag,研究了一下有如下特点
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
本文项目地址,sortable插件地址:https://github.com/sunshine940326/sortable
demo地址:https://github.com/sunshine940326/drag
在写我们后台的管理程序中需要有一个拖放的功能,然后我们有一个这样的功能,实现11个固定且大小不一的div互换,效果如下
作为一个小菜鸟,听到这样的消息我是蒙逼的= =,在网上找到一个插件,功能挺强大的
插件地址:https://github.com/sunshine940326/sortable
但是这个插件只能拖动和放置,不能交换,也就是只能将div插入在其他div前面,其余的向后推移,并且不能做到交换div中的内容,而div容器不变的条件,然后我就和其他同事商量了一下交换两个div中的数据要怎么处理,然后同事说这个就比较麻烦了= =。需要写死div,然后先记录鼠标拖动前的div中的内容,然后判断鼠标放下的位置,在哪一个div的范围内,再交换两个的数据= =,真正做起来还不知道有什么坑。听着都怕,于是就暂且搁置了这个功能,直到有一天非做不可了,我百度了一下“怎么交换两个div”,然后找到了一个demo,天啦噜~整个实现过程全部代码50行不到,js代码之后十几行,整个过程不到半个小时就解决了,★,°:.☆( ̄▽ ̄)/$:.°★。撒花!效果如下:
demo地址:https://github.com/sunshine940326/drag
查看代码,发现思路如下:
ondragstart( 用户开始拖动元素时触发)的时候使用该对象的dataTransfer.setData方法,并且用中间量记录点击的div
ondragover (当某被拖动的对象在另一对象容器范围内拖动时触发此事件),拖动div的时候阻止拖动的默认事件(drop 事件的默认行为是以链接形式打开)
ondrop (在一个拖动过程中,释放鼠标键时触发此事件)时候交换两个div的html
百度了一下发现这是html的新特性drag,研究了一下有如下特点
拖放
本例的代码如下<!DOCTYPE html> <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} #div2 {float:left; width:200px; height:135px; 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>
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :<div draggable="true"></div>
设置ondragstart 和并保存数据
ondragstart 属性调用了一个函数,drag(event,this),它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值,在这个例子中,数据类型是 “text/html”,值是可拖动元素的innerHTMLfunction drag(ev,divdom){ srcdiv=divdom; ev.dataTransfer.setData("text/html",divdom.innerHTML); }
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
function allowDrop(ev){ ev.preventDefault(); }
进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev,divdom){ ev.preventDefault(); if(srcdiv != divdom){ srcdiv.innerHTML = divdom.innerHTML; divdom.innerHTML=ev.dataTransfer.getData("text/html"); } }
相关文章推荐
- Html5实现如何在两个div元素之间拖放图像
- 拖放=>实现两个div内容互换
- HTML5 的拖放(实例:两个div之间拖放图片)
- 写两个相同内容的DIV,巧妙实现表单模块的状态,在可编辑和不可编辑之间切换
- JS 如何实现两个div的内容调换
- 将两个div左右并列显示并实现点击标题切换内容
- js实现两个div左右并列显示,并实现点击标题,切换内容显示
- 使用jQuery实现两个div中按钮互换位置的实例代码
- HTML5练习,实现图片在两DIV中相互拖放效果
- 将两个div左右并列显示并实现点击标题切换内容
- 实现两个内容总宽度不一致div的居中左对齐
- Css实现tab标签效果(二)----------内容为动态的div
- Js实现无刷新添加新层,拖动DIV层可互换位置丨www.CsrCode.cn
- 实现两个数字的互换,不需要借助第三个变量
- 分享利用JS实现两个select标签中内容更换的小实例
- 在HTML网页中用JavaScript实现两个选择框中的内容实现互选
- 显示两个文件不一致的内容的实现(细胞分裂的方法)
- C#如何实现比较两个文件的内容是否完全相同?
- 两个div并排的实现代码
- 通过div嵌套实现阴影,有两个边能有阴影效果