时间:2021-05-26
JS代码需要常写,不然容易生疏,最近虽然一直在看JS的原型,行为委托等知识点,但是动手写代码的量略有减少。本文与大家分享一个拖拽组件,供大家参考,具体内容如下
首先,看一下拖拽的原理。
被拖拽元素位置的变化,left值的变化其实就是鼠标位置水平方向的变化值,e.clientX - 鼠标左键按下时e.clientX。
top值的变化其实就是鼠标位置竖直方向的变化值,e.clientY - 鼠标左键按下时e.clientY。
另外就是设置拖拽的范围,上下左右不得超过父元素所在的区域。
说明:moDown响应鼠标左键按下操作,moMove响应鼠标移动操作,MoUp响应鼠标抬起操作。
在moMove中增加了e.which判断,e.which ==1 表示鼠标左键按下,这是为了解决,鼠标移除可拖拽范围外,再移回时,无需按下左键,被拖拽元素就会跟着动的Bug。
使用说明:
在使用时,被拖拽元素的id是必须参数,父元素的id(即可以拖拽移动的范围)为可选参数,如果不传递父元素的id,则默认使用documentElement为可拖拽的范围。
如果传递父元素,请别忘了将父元素的定位设为position:relative或position:absolute。
在使用时,先引入拖拽插件的js文件。
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="刘艳"> <meta name="Keywords" content="关键字"> <meta name="Description" content="描述"> <title>Document</title> <style> *{ margin:0px; padding:0px; } #content{ width:600px; height:500px; position:relative; border:5px solid green; } #drag{ position:absolute; height:100px; width:100px; top:50px;left:0px; background:pink; cursor:pointer; } </style> </head> <body> <div id = "content"> <div id = "drag" > </div> </div> </body></html><script src = "url/drag.js"></script><script> window.onload = function(){ var drag = new Drag({id: "drag", parentId: "content"}); drag.startDrag(); }</script>如果您想在整个窗口中拖拽,请不要设置被拖拽元素的父元素的定位,即,使其相对body定位。
如果您需要对body定位,但是又需要设置其父元素的position为非static,那么您可以对本插件进行扩展。
希望本文对大家学习javascript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。具体说明,请参考:学习链接npm官方演示:vuedraggable特性:支持触摸设
背景1、vue项目中的表格需要实现行拖拽功能2、表格使用element组件库中el-table方案介绍Sortable.js介绍:Sortable.js是一款轻
前言:前天刚写了篇JS组件BootstrapTable表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行。用了半天时间研究了下
这两天学习了Vue.js感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3
模板抽离我们已经学习过了Vue模板的另外定义形式,使用。首页新闻然后js里定义路由组件的时候://1.定义(路由)组件。constHome={template: