js实现div(javascript拖曳互换div的位置实现示例)
类别:编程学习 浏览量:1164
时间:2021-10-19 06:22:39 js实现div
javascript拖曳互换div的位置实现示例1 实现原理利用dom元素的dragstart/ondragover/ondrop事件完成,在拖曳开始的时候获取到拖曳元素,然后允许拖动,最后鼠标抬起后放到新的位置;这里用到了event.preventDefault()方法,很多人可能比较疑惑,这里简单介绍一下
event.preventDefault() :该方法是让浏览器不要执行与事件关联的默认动作
我们在dragover事件中使用,因为dragover关联的默认动作是阻止将数据或者元素放置到其他元素中;所以需要通过event.preventDefault()禁止该默认事件,这样就可以允许拖动元素到新的位置了
<!-- li拖曳调换顺序 适用gis中切换图层顺序--> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body{ display: flex; padding: 100px; flex-direction: column; } li{ width: 100px; height: 100px; text-align: center; } </style> </head> <body> <li style="background-color: red;width:200px;height:200px;" draggable="true">红色</li> <li style="background-color: green;width:100px" draggable="true">绿色</li> <li style="background-color: blue;" draggable="true">蓝色</li> </body> <script type="text/javascript"> let li =document.getElementsByTagName("li"); let container=null; // 遍历给每一个li绑定 dragstart dragover以及drop事件 for(let i=0;i<li.length;i++){ li[i].ondragstart=function(){ container=this } li[i].ondragover=function(){ event.preventDefault(); } li[i].ondrop=function(){ debugger; if(container!=null&&container!=this){ // 具体思路跟变量值互换一样 let temp=document.createElement("li"); document.body.replaceChild(temp,this); //用新建的li占据目的位置 document.body.replaceChild(this,container);// 目的li放置在起始位置 document.body.replaceChild(container,temp) // 起始li放置在目的位置 debugger; console.log('执行业务逻辑') } } } </script> </html>
到此这篇关于javascript拖曳互换li的位置实现示例的文章就介绍到这了,更多相关javascript拖曳互换li内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- javascript的执行顺序
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- javascript 数据分析(利用JavaScript差集实现一个对比小工具)
- javascript将字符串转换成数组(如何将JavaScript将数组转为树形结构)
- javascript构造重复数组(JavaScript平铺数组转树形结构的实现示例)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- javascript如何跨域
- 用css实现图片特效代码(HTML+CSS+JavaScript实现图片3D展览的示例代码)
- web中如何预防xss攻击(详解前端安全之JavaScript防http劫持与XSS)
- javascriptloop教程(JavaScript中的AOP编程的基本实现)
- 百度地图获取api过程(JavaScript接入百度地图API的方法步骤)
- js中事件的三个阶段(JavaScript中事件冒泡机制示例详析)
- js三级联动列表(基于JavaScript实现年月日三级联动)
- javascript怎么编写游戏(javaScript实现网页版的弹球游戏)
- javascript变量值做函数名(JavaScript中变量提升和函数提升实例详解)
- js tab栏案例(JavaScript实现Tab栏切换特效)
- 泰国人妖(变性手术生殖器要割掉吗)
- 泰国美女(泰国人妖和女性如何区分)
- 泰国旅游业怎么样(泰国的旅游产业)
- 越南新娘(越南新娘婚介网站)
- 越南新娘(越南新娘骗婚套路流程)
- 菲律宾游学(菲律宾游学中介机构)
热门推荐
- 在python中导入模块有哪几种方式(Python不同目录间进行模块调用的实现方法)
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- python写的工具(python调用虹软2.0第三版的具体使用)
- css3字体怎么设置(使用CSS3 font-feature-settings特性减除字体动画震颤效果)
- navicat连接数据库报密码错误(navicat 连接数据库隔段时间后自动断开连接的解决方案)
- serv-u兼容性(解决IIS和Serv-U冲突的问题[Serv-U 7.0])
- docker多个端口怎么分(Docker多个容器不能有相同端口号的处理方案)
- mysql面试题及答案100题(几个MySQL高频面试题的解答)
- python的编码方式(Python中文编码知识点)
- 阿里云轻量级服务器怎么安装宝塔(阿里云服务器安装宝塔面板和配置安全组图文教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9