wwl-drag
v1.0.16
Published
drag
Downloads
10
Readme
鼠标拖动效果。支持以absolute、fixed、relative、float定位的元素。
note
- 不兼容IE9以下。
- 未经过严格测试，如有问题烦请在issue中提出，会及时处理。
下载
- npm:
npm install -S wwl-drag - 直接下载:
http://wangwl.net/static/demo/wwl-drag/index.js
使用
- es2015:
import drag from 'wwl-drag' - commonjs:
var drag = require('wwl-drag') - amd:
define(['./wwl-drag'],function(drag){ /*...*/ }) - window.drag:
<script src="http://wangwl.net/static/demo/wwl-drag/index.js"></script>
示例1
var dispose1 = drag('#drag1'); //传入选择器
var dispose2 = drag(document.getElementById('drag2')); //传入元素节点
var dispose3 = drag('#drag3',{ proxy:true }); //传入配置参数。demo
http://wangwl.net/static/demo/wwl-drag/demo.html
函数签名
function drag( node, options )
- node: {element|string} 必填。鼠标拖动的目标元素。传入一个元素或者选择器。
- options: {object} 可选。相关配置参数。
函数返回值
var dispose = drag('#drag');
typeof dispose === 'function'; //truedrag()的返回值是function类型，用于释放资源(取消事件监听等)。
例如，在Vue的beforeDestroy和React的componentWillUnmount中需要调用dispose()。
options参数
{ container, targetContainer, handler, proxy, posProperty, event:{dragActive,dragStart,dragMove,dragEnd} }
container
{element|string} 元素节点或选择器。
指定拖动的容器，限制拖动元素只能在该容器中被拖动。
默认为 document.body，即拖动元素只能在该文档中拖动。
传入字符串"null"，则不限制范围。
//documentElement和null的区别:
/*
<style>
#drag1,#drag2{
left:0;
position:absolute;
width:50px;
height:50px;
border:1px solid #000;}
</style>
<body>
<div id=drag1></div>
<div id=drag1></div>
</body>
* */
drag('#drag1',{container:document.documentElement}); //拖动#drag1,定位left值最小为0。
drag('#drag2',{container:'null'}); //拖动#drag2,定位left值则可能为负数。
targetContainer
{element|string} 元素节点或选择器。
匹配拖动元素的容器。
例如: drag('div',{targetContainer:'#container'})，相当于 drag('#container div');
handler
{element|string} 元素节点或选择器
触发拖动的元素，默认点击当前元素任意位置触发拖动。
proxy
{bool}
是否开启拖动代理效果。
默认直接改变目标元素的定位，如果proxy为true，则直到拖动完成后，才改变目标元素的定位，拖动过程中，实际拖动的是一个占位浮层。
posProperty
{array}
指定定位的样式属性。默认通过改变元素的left和top值进行定位。
通过传入 {posProperty:[ 'right', 'bottom' ]}，则使用 right和bottom进行定位。
posProperty只识别"left","right", "top", "bottom"。
检测当存在"right"时，则使用right,否则使用left。当存在"bottom"时，则使用bottom，否则使用top。
event.dragActive
function(dragElement,startOffset)
触发拖动元素时触发，dragElement 为当前拖动元素，startOffset 为当前拖动元素的坐标。
note: 该事件实际是在mousedown事件中触发。
event.dragStart
function(dragElement,startOffSet)
开始拖动时触发，该事件回调如果返回布尔型的false，则取消拖动。例如:
drag('.drag', {
event: {
dragStart: function () {
return window.unlock == false;
}
}
})dragElement 为当前拖动元素，startOffset 为当前拖动元素的坐标。
note: 该事件实际是在首次执行mousemove事件时触发。
event.dragMove
function(dragElement,startOffset,endOffset)
拖动过程中触发的事件。
dragElement 为当前拖动元素，startOffset 为拖动元素拖动开始时的坐标。endOffset 为拖动元素的当前坐标。
note: 该事件实际是在mousemove事件中触发。
event.dragEnd
function(dragElement,startOffset,endOffset)
拖动结束事件。
dragElement 为当前拖动元素，startOffset 为拖动元素拖动开始时的坐标。endOffset 为拖动元素的当前坐标。
note:该事件实际是在mouseup事件中触发。
建议
在拖动过程中，可能会出现选中情况。这种情况并没有在组件中做处理，如有需要，建议开发者在dragStart或dragActive事件中做处理。