关键词：

简单的拖拽

• 拖拽
• 1、screenX 和screenY
• 2、clientX和clientY
• 3、pageX和pageY
• 4、offsetX和offsetY
• 实现拖拽

拖拽

拖拽是我们在项目开发中，必不可少的技能之一，关于拖拽，我们有些人很是头疼，因为搞不懂搞用哪个属性，那么我们先来说说关于页面位置属性的区别screenX、clientX、pageX, offsetX。

1、screenX 和screenY

参照点：电脑屏幕左上角
screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量
screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量

2、clientX和clientY

参照点：浏览器内容区域左上角
clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量（不会计算水平滚动的距离）
clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量（不会计算垂直滚动条的距离）

3、pageX和pageY

参照点：网页的左上角
pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是clientX加上水平滚动条的距离
pageY：鼠标点击位置相对于网页左上角的垂直平偏移量，也就是clientY加上垂直滚动条的距离

4、offsetX和offsetY

offsetX：鼠标点击位置相对于触发事件对象的水平距离
offsetY：鼠标点击位置相对于触发事件对象的垂直距离

实现拖拽

当我们确定了要用什么属性以后，写代码就会变得简单的许多

<template>
    <div class=''>
      <div class="an" v-drag>
        11
      </div>
    </div>
</template>

<script>
export default 
    data() 
        return ;
    ,
    mounted() ,
    methods: 
    ,
    //利用事件委托
    directives:
      drag(el)
      	//鼠标摁下事件
        el.onmousedown=function (e) 
          var x=e.pageX-el.offsetLeft
          var y=e.pageY-el.offsetTop
          //鼠标移动事件
          document.onmousemove=function (e) 
            el.style.left=e.pageX-x+'px'
            el.style.top=e.pageY-y+'px'
          ,
          //鼠标抬起事件
          document.onmouseup=function () 
            document.onmousemove=document.onmouseup
          
        
      
    
;
</script>

<style lang='scss' scoped>
.an
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 100px;
  background-color: aquamarine;

</style>

vue基于vuedraggable实现拖拽(代码片段)

进入项目目录npmivuedraggable-S在vue页面script中引入并且注册<!--1组无法拖拽到2组--><draggablev-model="resultList"@end="dragged"><divv-for="iteminresultList"v-if=' 查看详情

vue实现bar左右拖拽(代码片段)

效果图功能实现bar左右拖拽左侧：js通过width控制 :style="width: lwidth"右侧：盒子设置定位position，js通过的left来控制，同时样式需要设置 right: 0; bottom: 0; 才会出现width中间：设置定位position，使用calc计算... 查看详情

基于vue实现可以拖拽的树形表格实例详解(代码片段)

...合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程，项目源代码请看github，插件已打包封装好，发布到npm上　本博文会分为两部分，第一部分为使用方式，第二部分为实现方式安装方式npm... 查看详情

vue+element+vuedraggable实现拖拽排序(代码片段)

准备工作首先使用yarnaddvuedraggable或者npmi-Svuedraggable安装组件。<draggable v-model="codeList" @update="datadragEnd" :options="animation:200"> <divclass=" 查看详情

elementui系列一vue拖拽功能实现-vuedraggable实现多层嵌套拖拽(代码片段)

拖拽功能组件awe-dnd和vue-draggable做了一番比较，最终选择了vue-draggable，至于原因：vue-draggable的@start和@end只会在拖拽元素移动的开始和结束时触发，过程中不会触发awe-dnd会一直监听拖拽的过程，在拖拽的... 查看详情

10分钟实现简易vue拖拽排序(代码片段)

...于是有条不紊的进行了。But,一个Vue的拖拽排序功能如何实现却让我犯了难,在痛苦的学习中我终于明白了这个东西是怎么玩的记录的同时进行分享,希望能帮助到有同样需 查看详情

vue集成dhtmlx。实现列表到树形的拖拽(代码片段)

效果查看：将右侧菜单拖拽入左侧树中：1，public引入dhtmlx,并在index.html中引用：2，封装vue组件：<template><divid="dhtmlTree"style="width:95%;height:100%;overflow:au 查看详情

vue里怎么实现右侧悬浮，并且能上下拖拽的按钮功能？(代码片段)

实现效果该按钮可以上下拖拽，不能左右拖拽，并且可以点击。代码如下<template><divref="dragDiv"class="float-drag-button"><span>凯小默的博客</span></div></template><s 查看详情

vue里怎么实现右侧悬浮，并且能上下拖拽的按钮功能？(代码片段)

实现效果该按钮可以上下拖拽，不能左右拖拽，并且可以点击。代码如下<template><divref="dragDiv"class="float-drag-button"><span>凯小默的博客</span></div></template><s 查看详情

vue2实现图片的拖拽缩放旋转(代码片段)

本文是基于vue2实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。效果图分步骤实现在这里看下拖拽、旋转、缩放的几个方法1.获取图片的实际宽高getImgSize(url)returnnewPromise((resolve,reject)=>letimgObj=newImage();imgObj.src=url;imgO... 查看详情

vue卡片拖拽自动排列交换位置拖拽数据存取(代码片段)

这是这次系列文章的第一篇，我自己封装了一个用vue实现的拖动卡片组件，并且发布到npm，详细地记录下来了整体制作过程。总共有三篇文章，介绍组件的制作思路和遇到的问题，以及在发布到npm上并下载使用的过程中，发生了... 查看详情

vue基于vuedraggable实现拖拽(代码片段)

进入项目目录npmivuedraggable-S在vue页面script中引入并且注册<!--1组无法拖拽到2组--><draggablev-model="resultList"@end="dragged"><divv-for="iteminresultList"v-if='item.group_flag==1':title="item.i... 查看详情

基于vue实现拖拽升级（九宫格拖拽）(代码片段)

前言在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入传送门：Demo以及完整代码连接效果实例简单了解Grid布局（网格布局）什么是网格布局CSS网格布局（又称“网格”），... 查看详情

#quill-image-extend-module：实现vue-quill-editor图片上传，复制粘贴，拖拽(代码片段)

quill-image-extend-modulevue-quill-editor的增强模块，功能：提供图片上传到服务器的功能复制插入拖拽插入显示上传进度显示上传成功或者失败支持与其他模块一起使用（例如调整图片大小）Installnpminstallquill-image-extend-module--save-devuseimp... 查看详情

vue集成dhtmlx。实现列表到树形的拖拽(代码片段)

效果查看：将右侧菜单拖拽入左侧树中：1，public引入dhtmlx,并在index.html中引用：2，封装vue组件：<template><divid="dhtmlTree"style="width:95%;height:100%;overflow:auto;"></div></template><s... 查看详情

vue集成dhtmlx。实现列表到树形的拖拽(代码片段)

效果查看：将右侧菜单拖拽入左侧树中：1，public引入dhtmlx,并在index.html中引用：2，封装vue组件：<template><divid="dhtmlTree"style="width:95%;height:100%;overflow:auto;"></div></template><s... 查看详情

vue+elementui项目实现表格-单行拖拽(代码片段)

最近在项目的中用到了表格单行拖拽的功能，当时直接复制粘贴别人的代码，今天有时间再回头看看：首先VUE+ELEMENT+SORTABLEJS 准备好，对应的是以下版本    1.  "element-ui": "^2.13.2" 2.  "vue":&nb... 查看详情

vue实现拖拽(代码片段)

...creenX和screenY2、clientX和clientY3、pageX和pageY4、offsetX和offsetY实现拖拽拖拽拖拽是我们在项目开发中，必不可少的技能之一，关于拖拽，我们有些人很是头疼，因为搞不懂搞用哪个属性，那么我们先来说说关于页... 查看详情