运用js实现图层拖拽的功能

1.需求分析：设计一个元素，可以跟随鼠标的移动，元素也进行移动，并且能够在鼠标按上与按下元素的时候，元素同样可以进行改变样式颜色。
2. 设计思路：先是需要获取元素，给元素绑定鼠标按下的事件，在绑定的事件中，兼容event事件，获取鼠标的坐标和元素的坐标，通过鼠标的坐标减去元素的坐标就可以得到鼠标在元素中的坐标。在绑定事件中，写上一个元素的移动事件，获取元素的移动坐标。最后，在鼠标按上的事件函数中，可以调用元素的移动事件就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图层拖拽</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      border: 2px solid #ccc;
      cursor: pointer;
      position: absolute;
      top: 20px;
      left: 100px;
    }
  </style>
</head>
<body>
<div class="box" id="box"></div>
</body>
<script>
   var box = document.getElementById("box");
   box.onmousedown = function(env){
     // 兼容event事件
     var env = env || window.event;
     // 获取鼠标的坐标
     var x = env.clientX;
     var y = env.clientY;
    // 获取元素的坐标
     var left = box.offsetLeft;
     var top = box.offsetTop;
    // 获取鼠标在元素中的坐标
    var x_left = x - left;
    var y_top = y -top;
    // 鼠标点击后改变颜色
    box.style.background = "red";
    // 元素的移动事件函数
    box.onmousemove = function(env){
      // 兼容event事件
     var env = env || window.event;
     // 获取元素移动时的鼠标的坐标
     var x = env.clientX;
     var y = env.clientY;
      // 元素的移动坐标
     box.style.left = (x - x_left)+"px";
     box.style.top = (y - y_top)+"px";
    }
   };
  // 鼠标弹出的事件函数
  box.onmouseup = function(){
    box.style.background = "skyblue";
    // 在鼠标弹出后再次调用元素的鼠标移动事件
    box.onmousemove = function(){};

  };
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • arcgis for js栅格图层叠加(Raster Layer)问题

    arcgis for js栅格图层叠加(Raster Layer)问题

    其实呢,这个问题或许与栅格图层(Raster Layer)关系并不十分大,也可能所有类型的图层都有这个问题,我对arcgis尚不十分了解,目前只在栅格图层遇到问题,所以先记下来,存疑. 栅格图层啥问题呢?叠不出来,报错. 比如,有这么个地图服务: 然后想直接叠加其中一个子图层(可见其类型为栅格图层). 代码如下: var layer = new ArcGISDynamicMapServiceLayer("http://192.168.0.225:6080/arcgis/HN_test/MapSe

  • 微信小程序 视图层（xx.xml)和逻辑层(xx.js)详细介绍

    微信小程序 视图层（xx.xml)和逻辑层(xx.js)详细介绍

    微信小程序可以理解为云OS的概念,微信生态本身就是一个OS.加上微信公众平台和微信开发平台本身已经是非常成熟的架构,能够完美媲美App的功能,同时在交互体验方面也能够做到极致,大有取代App之势.苹果App Store模式的意义在于为第三方软件的提供者提供了方便而又高效的一个软件销售平台.用户购买应用所支付的费用由苹果与应用开发商3:7分成.如果微信小程序商城也采用类似的分佣模式,那8亿多的用户将是一个非常大的无形资产,成为腾讯继游戏.会员.广告后的另一个掘金源. 微信小程序允许人们无需进行下载

  • 基于AGS JS开发自定义贴图图层

    基于AGS JS开发自定义贴图图层

    1.前言 假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩放(不是单纯的以气泡来展示).如果利用传统方案,则是我们首先将图片纠正赋予地理信息,然后根据地图级别进行切图,最后以瓦片的形式叠加至地图上,工作量是很大的.然而考虑到图片本身不会太大(小于3M),那么有没有其他方法来解决呢.这里我和大家一起探讨几种解决思路. 2.解决思路 2.1基于grahpic和symbol来解决 2.1.1思路描述 简单说就是获取图片左上角和右下角对应的地理坐标,给grahpic的geometry赋上左

  • js实现点击按钮后给Div图层设置随机背景颜色的方法

    本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>js设置随机颜色 <

  • 运用js实现图层拖拽的功能

    1.需求分析:设计一个元素,可以跟随鼠标的移动,元素也进行移动,并且能够在鼠标按上与按下元素的时候,元素同样可以进行改变样式颜色. 2. 设计思路:先是需要获取元素,给元素绑定鼠标按下的事件,在绑定的事件中,兼容event事件,获取鼠标的坐标和元素的坐标,通过鼠标的坐标减去元素的坐标就可以得到鼠标在元素中的坐标.在绑定事件中,写上一个元素的移动事件,获取元素的移动坐标.最后,在鼠标按上的事件函数中,可以调用元素的移动事件就可以了. <!DOCTYPE html> <html lang=&

  • vuejs2.0运用原生js实现简单拖拽元素功能

    vuejs2.0运用原生js实现简单拖拽元素功能

    本文实例为大家分享了vuejs2.0实现简单拖拽元素功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <me

  • vuejs2.0运用原生js实现简单的拖拽元素功能示例

    vuejs2.0运用原生js实现简单的拖拽元素功能示例

    整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta

  • JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

    复制代码 代码如下: <HTML> <HEAD> <TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alp

  • js实现鼠标拖拽多选功能示例

    js实现鼠标拖拽多选功能示例

    最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&

  • JS实现的简单拖拽购物车功能示例【附源码下载】

    JS实现的简单拖拽购物车功能示例【附源码下载】

    本文实例讲述了JS实现的简单拖拽购物车功能.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8" /> <title>使用拖放API将商品拖入购物车</title> <style> body { font-size:12px } .liT{ border-bottom:solid 1px #ccc; background-color:#eee; font-weig

  • js实现控制文件拖拽并获取拖拽内容功能

    在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有drag.dragend.dragenter.dragexit(没有浏览器实现).dragleave.dragover.dragstart.drop,详细的内容可以看MDN. 其中,与拖拽文件相关的事件有dragenter(文件拖拽进).dragover(文件拖拽在悬浮).dragleave(文件拖

  • 基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

    基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

    ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; •ng-drop:是否允许放入拖拽元素 •ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据:$event拖拽事件对象 •ng-drag:元素是否允许拖拽 •ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象 •

  • vue+element-ui+sortable.js实现表格拖拽功能

    vue+element-ui+sortable.js实现表格拖拽功能

    本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下 效果如下: 1.vue使用cli创建项目就不说了,本人使用的是cli3.x版本 2.下载element-ui npm i element-ui -S 3.引入element-ui,找到main.js,加入如下代码 // 导入element-ui,和全局使用element-ui样式 import ElementUI from "element-ui"; import

  • vue中实现拖拽排序功能的详细教程

    vue中实现拖拽排序功能的详细教程

    目录 原生拖拽 API 实现拖拽 设置元素 dragable 拖放事件 拖拽排序 拖拽API + 防抖实现 vue awe-dnd 拖拽组件 安装 awe-dnd 组件库 在 main.js 中将 awe 挂载到全局 实现案例 项目中-- 拖拽的效果 不理想 vue-smooth-DnD 安装 smooth-dnd API: container smooth-dnd 生命周期 回调 事件 API: Draggable 效果实现 项目中实现 – 拖拽位置无法确定 vuedraggable 安装 引

随机推荐