javascript拖曳互换div的位置实现示例


Posted in Javascript onJune 28, 2021

1 实现原理

利用dom元素的dragstart/ondragover/ondrop事件完成,在拖曳开始的时候获取到拖曳元素,然后允许拖动,最后鼠标抬起后放到新的位置;这里用到了event.preventDefault()方法,很多人可能比较疑惑,这里简单介绍一下

event.preventDefault() :该方法是让浏览器不要执行与事件关联的默认动作

我们在dragover事件中使用,因为dragover关联的默认动作是阻止将数据或者元素放置到其他元素中;所以需要通过event.preventDefault()禁止该默认事件,这样就可以允许拖动元素到新的位置了

<!-- div拖曳调换顺序 适用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;
        }
        div{
            width: 100px;
            height: 100px;
            text-align: center;
        }
    </style>
 
</head>
<body>
   <div style="background-color: red;width:200px;height:200px;" draggable="true">红色</div>
    <div style="background-color: green;width:100px" draggable="true">绿色</div>
    <div style="background-color: blue;" draggable="true">蓝色</div>
</body>
<script type="text/javascript">
    let div =document.getElementsByTagName("div");
    let container=null;
    // 遍历给每一个div绑定 dragstart dragover以及drop事件
    for(let i=0;i<div.length;i++){
        div[i].ondragstart=function(){  
            container=this
        }
        div[i].ondragover=function(){
            event.preventDefault();
        }
        div[i].ondrop=function(){
            debugger;
            if(container!=null&&container!=this){
                // 具体思路跟变量值互换一样
                let temp=document.createElement("div");
                document.body.replaceChild(temp,this);   //用新建的div占据目的位置
                document.body.replaceChild(this,container);// 目的div放置在起始位置
                document.body.replaceChild(container,temp)  // 起始div放置在目的位置
                debugger; 
                console.log('执行业务逻辑')
            }
        }
    }
</script>
</html>

javascript拖曳互换div的位置实现示例

到此这篇关于javascript拖曳互换div的位置实现示例的文章就介绍到这了,更多相关javascript拖曳互换div内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript this用法小结
Dec 19 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
Vue实现tab导航栏并支持左右滑动功能
React列表栏及购物车组件使用详解
React如何创建组件
Jun 27 #Javascript
Vue3.0写自定义指令的简单步骤记录
关于JavaScript回调函数的深入理解
Jun 27 #Javascript
You might like
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python字典快速保存于读取的方法
2018/03/23 Python
python实现list由于numpy array的转换
2018/04/04 Python
python读取几个G的csv文件方法
2019/01/07 Python
django模板结构优化的方法
2019/02/28 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python实现移位加密和解密
2019/03/22 Python
eclipse创建python项目步骤详解
2019/05/10 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python代码注释规范代码实例解析
2020/08/14 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
团日活动总结
2014/04/28 职场文书
教师演讲稿大全
2014/05/16 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
投诉书格式范本
2015/07/02 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
医院病假条怎么写
2015/08/17 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL