html

<el-button @mousedown.native="beginMove" size="mini">按钮</el-button>
<divid="innerHtml"@mousemove="moveControl"@mouseup="endMove"
></div>

JS

data() {//这里存放数据return {leftShow: true,is_move: false,tempElement: null,createElement: null};
},
methods: {/*** 开始拖拽* */beginMove(e) {this.is_move = true;//隐藏页面上其他元素this.leftShow = false;//clone一个新元素出来 此为本体this.createElement = e.target.cloneNode(true);// 创建一个临时元素this.tempElement = document.createElement("div");this.tempElement.style.position = "absolute";// 给它设置一个边框this.tempElement.style.border = "1px dashed #fc6";this.tempElement.style.width = e.target.offsetWidth + "px";this.tempElement.style.height = e.target.offsetHeight + "px";document.getElementById("innerHtml").append(this.tempElement);},/*** 拖拽过程* */moveControl(e) {if (this.is_move) {this.tempElement.style.top =e.clientY - this.tempElement.offsetHeight / 2 + "px";this.tempElement.style.left =e.clientX - this.tempElement.offsetWidth / 2 + "px";}},/*** 拖拽完成* @param e*/endMove(e) {this.is_move = false;this.leftShow = true;//设置本体的属性this.createElement.style.position = "absolute";//将临时元素的位置取到本体this.createElement.style.top = this.tempElement.style.top;this.createElement.style.left = this.tempElement.style.left;document.getElementById("innerHtml").append(this.createElement);//移除临时元素this.tempElement.remove();this.tempElement = null;}}

效果图

js 拖拽元素鼠标速度过快问题相关推荐

js 拖拽元素鼠标速度过快元素跟不上
自己写一个拖拽元素,使用js拖拽元素时,鼠标速度过快时元素跟不上鼠标参考了网上的文章 ,里面对比了绑定到 body和document上的不同点js 拖拽元素鼠标速度过快问题明白过来是因为速度过 ...
js拖拽元素到另一个元素_js控制浏览器滚动条到制定元素
最近在使用selenium抓取数据,但是需要使用js控制滚动条来加载数据.主要是不会js,不会直接使用js来加载数据. 这里就使用笨方法,控制滚动条滚动到制定元素来加载数据. 版本1:下拉滚动条最开 ...
js拖拽之二：实现拖动元素上下左右改变元素大小
具体原理参考 js拖拽一 <script> var oDiv = document.getElementById("div1"); oDiv.onmousedown = ...
html元素拖动互换位置原理,【详】JS实现拖拽元素互换位置
写在前面的废话大家好,我是练习js时长接近两年半的个人练习生--李大雷算了,直接鸡,你太美~ 应用场景很多时候,我们需要让用户来自定义自己想要的菜单顺序,或者一些按钮的排序,那么这个时候,怎么 ...
js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
系列文章目录文章目录系列文章目录背景与效果图 1.背景如下(功能图): 2.效果图如下: 拖拽后的效果缩放的效果放大的效果一.功能:支持鼠标长按拖拽 1.鼠标事件: 2.拖拽功能流程 3. ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

js 拖拽元素鼠标速度过快问题

html

JS

效果图

js 拖拽元素鼠标速度过快问题相关推荐

最新文章

热门文章

js 拖拽元素 鼠标速度过快问题

html

JS

效果图

js 拖拽元素 鼠标速度过快问题相关推荐

最新文章

热门文章

js 拖拽元素鼠标速度过快问题

js 拖拽元素鼠标速度过快问题相关推荐