vue v-drag 拖动拖拽移动div 拖拽滑动div

<template><div class="drag"><div ref="element" class="content" v-drag draggable="false"><p>文字网页</p></div><div style="height:2000px;width:100%"></div></div>
</template>
<script >export default {data(){return {dd:"",inout:""}},directives: {drag(el){let oDiv = el; //当前元素let self = this; //上下文//禁止选择网页上的文字document.onselectstart = function() {return false;};oDiv.onmousedown = function(e){//鼠标按下，计算当前元素距离可视区的距离let disX = e.clientX - oDiv.offsetLeft;let disY = e.clientY - oDiv.offsetTop;document.onmousemove = function(e){//通过事件委托，计算移动的距离let l = e.clientX - disX;let t = e.clientY - disY;//移动当前元素oDiv.style.left = l + "px";oDiv.style.top = t + "px";}document.onmouseup = function(e){document.onmousemove = null;document.onmouseup = null;};//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效return false;};}}}
</script>
<style>
.drag{position: relative;
}
/* position:absolute;这个还是要设的，不然拖动块定不了位置 */
.content{position:absolute;height:100px;width:100px;background-color: #67C23A;cursor: pointer;
}
</style>

vue v-drag 拖动拖拽移动div 拖拽滑动div相关推荐

Vue 实现拖拽模块(一)拖拽添加组件
本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue拖拽添加组件的简单实现,具体如下: 效果图实现思路使用 H5 的新特性 ...
java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
Vue实现拖拽升级(九宫格拖拽)
前言在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局. 效果实例简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称"网格"),是一种二维网格布局 ...
vue中实现拖动调整左右两侧div的宽度
最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样一.HTML代码 <template><div class="box" ...
vue使用高德地图的搜索地址和拖拽选址
1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --save 2.vue中引入,用到所搜提示组件和拖拽选址,本人的经历是2.0版本是个傻逼垃圾坑,用默认的版本 ...
JQuery拖拽通过八个点改变div大小
(function($) {/*** 默认参数*/var defaultOpts = {stage: document, //舞台item: 'resize-item', //可缩放的类名};/*** ...
Element UI表格拖拽（vue中） —— 行拖拽、列拖拽
目录安装依赖 vuedraggable 实现拖拽的要点行拖拽要点列拖拽要点完整范例代码安装依赖 vuedraggable 安装 vuedraggable 的同时,会自动安装 sortabl ...
java swing 控件拖动_java swing中实现拖拽功能示例
java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: package com; import java.awt.*;import java.awt.datat ...
html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp 转载于:https://www.cnblogs.com/xiaol ...
vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...

vue v-drag 拖动拖拽移动div 拖拽滑动div

vue v-drag 拖动拖拽移动div 拖拽滑动div相关推荐

最新文章

热门文章

vue v-drag 拖动 拖拽 移动div 拖拽滑动div

vue v-drag 拖动 拖拽 移动div 拖拽滑动div相关推荐

最新文章

热门文章

vue v-drag 拖动拖拽移动div 拖拽滑动div

vue v-drag 拖动拖拽移动div 拖拽滑动div相关推荐