vue实现拖拽的简单案例 不超出可视区域

本文实例为大家分享了vue实现拖拽x效果的具体代码，供大家参考，具体内容如下

实现拖拽之前，先了解几个小常识：

这两种获取鼠标坐标的方法，区别在于基于的对象不同：

  • pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；
  • clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；

1.clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离
2.clientY: 是用来获取鼠标点击的位置距离 当前窗口 上边的距离
3.offsetWidth: 用来获取当前拖拽元素 自身的宽度
4.offsetHeight:用来获取当前拖拽元素 自身的高度 
5.document.documentElement.clientHeight ：屏幕的可视高度
6.document.documentElement.clientWidth：屏幕的可视高度

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue实现拖拽</title>
 <script src="./js/vue.min.js"></script>
 </head>
 <style>
 *{margin: 0;padding:0;}
  #app{
   position: relative;  /*定位*/
   top: 10px;
   left: 10px;
   width: 80px;
   height: 80px;
   background: #666;  /*设置一下背景*/
  }
 </style>
 <body>
 <div id="app" @mousedown="move">
 {{positionX}}
 {{positionY}}
 </div>
 </body>
<script>
 var vm = new Vue({
 el: "#app",
 data: {
 positionX: 0,
 positionY: 0
 },
 methods: {
 move(e){
 let odiv = e.target;// 获取目标元素

 //计算出鼠标相对点击元素的位置,e.clientX获取的是鼠标的位置，OffsetLeft是元素相对于外层元素的位置
 let x = e.clientX - odiv.offsetLeft;
 let y = e.clientY - odiv.offsetTop;
 console.log(odiv.offsetLeft,odiv.offsetTop)
 document.onmousemove = (e) => {
  // 获取拖拽元素的位置
  let left = e.clientX - x;
  let top = e.clientY - y;
  this.positionX = left;
  this.positionY = top;
  //console.log(document.documentElement.clientHeight,odiv.offsetHeight)
  // 把拖拽元素 放到 当前的位置
  if (left <= 0) {
  left = 0;
  } else if (left >= document.documentElement.clientWidth - odiv.offsetWidth){
  //document.documentElement.clientWidth 屏幕的可视宽度
  left = document.documentElement.clientWidth - odiv.offsetWidth;
  }

  if (top <= 0) {
  top = 0;
  } else if (top >= document.documentElement.clientHeight - odiv.offsetHeight){
  // document.documentElement.clientHeight 屏幕的可视高度
  top = document.documentElement.clientHeight - odiv.offsetHeight

  }
  odiv.style.left = left + "px";
  odiv.style.top = top + "px"

 }
    // 为了防止 火狐浏览器 拖拽阴影问题
 document.onmouseup = (e) => {
  document.onmousemove = null;
    document.onmouseup = null
 }
 }
 }
 })
</script>
</html>

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

赞 (0)

相关推荐

  • 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

  • Vue拖拽组件开发实例详解

    为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: •使用虚拟DOM: •轻量级框架: •高效的数据绑定: •灵活的组件系统: •完整的开发生态链. 这就是我们为什么选择Vue框架的一些原因. 为什么要封装成一个Vue组件? 主要目的是可提高代码的复用性和可维护性. •复用性:组件化后,一些样式和逻辑均通过配置参数的方式去差异化体现,所以参数的可配置性提高了组件的复用

  • vue2.0使用Sortable.js实现的拖拽功能示例

    vue2.0使用Sortable.js实现的拖拽功能示例

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. 实现效果 实现后的效果如图所示:

  • vuedraggable+element ui实现页面控件拖拽排序效果

    项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"

  • 基于Vue实现拖拽功能

    基于Vue实现拖拽功能

    本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: <div id="box"> 位置 <br>x:{{val.x}} <br>y:{{val.y}} <div v-drag="greet" id="drag" :style="style"> //注意这里要通过指令绑定函数将当前元素的位置数据传出来 </div> &l

  • vue实现element-ui对话框可拖拽功能

    element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解决边界问题的,但是不解决边界问题存在一个bug,拖到不可视区域后边再也拖不回来了,不信你们可以试试. 在实现的功能的情况下,封装成了js文件,然后再main.js中引入后可全局使用. 还是上代码吧 功能实现代码directives.js代码如下: import Vue from 'vue'; //

  • 基于Vue实现拖拽效果

    效果图 demo1.gif 分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY

  • Vue.Draggable实现拖拽效果

    快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":

  • Vue自定义指令拖拽功能示例

    下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1

  • vue使用drag与drop实现拖拽的示例代码

    在功能中有一项是需要实现拖拽的.虽然最终项目没有采取这样的拖拽方式,但是,当初也是费了九牛二虎之力完成了这个功能.增加了对函数的更深理解.下面就再重现一下代码. 下面是代码片段: <div class="fav-fold-panel" v-if="!typeChange" draggable="true" @dragstart="drag($event)" @dragover="allowDrop($event

随机推荐