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 相关文章推荐
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
angular directive的简单使用总结
May 24 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
Vue实现tab导航栏并支持左右滑动功能
React列表栏及购物车组件使用详解
React如何创建组件
Jun 27 #Javascript
Vue3.0写自定义指令的简单步骤记录
关于JavaScript回调函数的深入理解
Jun 27 #Javascript
You might like
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
一个简单的PHP入门源程序
2006/10/09 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
js命名空间写法示例
2015/12/18 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
原生js轮播特效
2017/05/18 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
React 实现车牌键盘的示例代码
2019/12/20 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python中对列表排序实例
2015/01/04 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
分享6个隐藏的python功能
2017/12/07 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
用Python读取几十万行文本数据
2018/12/24 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
音乐器材管理制度
2014/01/31 职场文书
客服部班长工作责任制
2014/02/25 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
大学生毕业求职信
2014/06/12 职场文书
追悼会答谢词
2015/01/05 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书