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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
jquery 图片轮换效果
Jul 29 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
Vue实现tab导航栏并支持左右滑动功能
React列表栏及购物车组件使用详解
React如何创建组件
Jun 27 #Javascript
Vue3.0写自定义指令的简单步骤记录
关于JavaScript回调函数的深入理解
Jun 27 #Javascript
You might like
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP实现倒计时功能
2020/11/16 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python hashlib模块实例使用详解
2019/12/24 Python
Python利用命名空间解析XML文档
2020/08/10 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
Structs界面控制层技术
2013/10/11 面试题
本科生个人求职自荐信
2013/09/26 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
新课培训心得体会
2014/09/03 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014年防汛工作总结
2014/12/08 职场文书
教师个人发展总结
2015/02/11 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
Python入门之基础语法详解
2021/05/11 Python
Redis批量生成数据的实现
2022/06/05 Redis