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

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js点击弹出div层实现可拖曳的弹窗效果

    弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad

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

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

    1 实现原理 利用dom元素的dragstart/ondragover/ondrop事件完成,在拖曳开始的时候获取到拖曳元素,然后允许拖动,最后鼠标抬起后放到新的位置:这里用到了event.preventDefault()方法,很多人可能比较疑惑,这里简单介绍一下 event.preventDefault() :该方法是让浏览器不要执行与事件关联的默认动作 我们在dragover事件中使用,因为dragover关联的默认动作是阻止将数据或者元素放置到其他元素中:所以需要通过event.preve

  • JavaScript动态创建div属性和样式示例代码

    1.创建div元素: Javascript代码 复制代码 代码如下: <scripttypescripttype="text/javascript"> functioncreateElement(){ varcreateDiv=document.createElement("div"); createDiv.innerHTML="Testcreateadivelement!"; document.body.appendChild(cr

  • javascript 通过封装div方式弹出div窗体

    javascript 通过封装div方式弹出div窗体

    图1(弹出一个div) 图2(弹出多个)构造函数: 复制代码 代码如下: var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){ this.popup =popup ; this.height =varheight ; //窗口高度,并没用来设置窗口高度宽度,用来定位在

  • JavaScript实现页面动态验证码的实现示例

    JavaScript实现页面动态验证码的实现示例

    引言: 现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现.我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看. 效果图: 实现思路: 把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码: 把验证码渲染出来(一个一个的渲染): 绘制一定数量的干扰线,随机颜色: 输入验证码,输入4位以后去验证,正确显示钩,错误显示叉并且刷新验证码. 编写构造函数 文本构造函数 //文字的构造函数 function Te

  • JavaScript实现无缝轮播图的示例代码

    JavaScript实现无缝轮播图的示例代码

    目录 上效果 一.实现过程 1)首先实现基本布局 2)主要样式 二.如何实现无缝呢 (重点来了) 思路: 主要代码 完整代码 花费一个下午从0到1实现的轮播图,当然还有很多需要改进的地方(欢迎提出需要改进的地方),等我再努力努力,将其封装成一个组件. 上效果 一.实现过程 1)首先实现基本布局 <div class="carousel-container"> //图片列表 <div class="carousel-list"></div

  • 使用纯JavaScript封装一个消息提示条功能示例详解

    目录 介绍 思路&布局 操作逻辑 完整代码 介绍 一个类似Element UI.Ant-Design UI等 UI 框架的消息提示功能,方便在任何网页环境中直接调用函数使用:区别在不依赖 js 及 css 引用,而是使用纯 js 进行封装实现,代码更精简,同时保持和 UI 框架一样的视觉效果(可自行修改成自己喜欢的样式) 代码仓库 在线预览效果(点击[登录].[点击复制]按钮时触发提示效果) 思路&布局 先来写单个提示条,并实现想要的过渡效果,最后再用逻辑操作输出节点即可:这里不需要父节点

  • JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法.分享给大家供大家参考,具体如下: 在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口. 这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的Div,才触发打开新窗口的事件. 比如下图的效果: 在原网页中,指定一个Div,无论用户点击这个Div的任意区域,都会打开新窗口,而点击其它地方则不会. 在新窗口的地址栏不可以编辑,不能被调

  • 如何创建一个JavaScript弹出DIV窗口层的效果

    在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果. 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好--生硬的弹出对话框且伴随着"哐"的一声对用户体验是个很大的挑战:其次,兼容性不够强--有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种更合理的解决方案--使用很少的HTML代码,很少的

  • JavaScript使用Ajax上传文件的示例代码

    本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&

  • python3 使用OpenCV计算滑块拼图验证码缺口位置(场景示例)

    python3 使用OpenCV计算滑块拼图验证码缺口位置(场景示例)

    前言 滑块拼图验证码的失败难度在于每次图片上缺口位置不一样,需识别图片上拼图的缺口位置,使用python的OpenCV库来识别到 环境准备 pip 安装 opencv-python pip installl opencv-python OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉库,提供了很多处理图片.视频的方法. OpenCV库提供了一个方法(matchTemplate()):从一张较大的图片中搜索一张较小图片,计算出这张大图上各

随机推荐