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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
Vue实现tab导航栏并支持左右滑动功能
React列表栏及购物车组件使用详解
React如何创建组件
Jun 27 #Javascript
Vue3.0写自定义指令的简单步骤记录
关于JavaScript回调函数的深入理解
Jun 27 #Javascript
You might like
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
angular4自定义组件详解
2017/09/28 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python 读取修改pcap包的例子
2019/07/23 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Python配置文件处理的方法教程
2019/08/29 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
error和exception有什么区别
2012/10/02 面试题
机械设计职业生涯规划书
2013/12/27 职场文书
村庄环境整治方案
2014/05/15 职场文书
节能减耗标语
2014/06/21 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
金砖之国观后感
2015/06/11 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python