dragger - 拖动控件

一个节点需要由鼠标拖动改变位置

如:

拖动控件

Allocate

拖拽控件脚本所在 {lib}util/dragger/dragger.js

<div class="box" id="box">
    <div class="dragger" id="dragger">&nbsp;</div>
</div>

box是相对定位,dragger是绝对定位,如果才能自由的改变dragger的位置 拖拽控件示例如下

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _v = _('nej.v'),
        _tu = _('t.u'),
        _p = _('nej.ut');
     var _draggerEle = _e._$get('dragger');
     var _dragger = _p._$$Dragger._$allocate({view:_e._$get('box'),body:_draggerEle,overflow:false,onchange:onChange,ondragend:onDragEnd})
     function onChange(_event){
         console.log('top:'+_event.top+',left:'+_event.left);
     }
     function onDragEnd(_event){
         console.log('end top:'+_event.top+',left:'+_event.left);
     }
     _tu._$processCode();
}
define(['{lib}util/dragger/dragger.js', '{pro}js/extend.js'],f);

Explain

参数

view [Node] - 视窗节点,默认为documentElement或body节点,拖动参照节点

body [String|Node] - 移动控件节点

mbar [String|Node] - 触发移动节点ID或者对象,默认为body参数输入节点

overflow [Boolean] - 是否允许超出view范围

direction [Number] - 移动方向,默认为0,0-水平+垂直、1-水平、2-垂直

onchange [Function] - 位置变化触发事件

ondragend [Function] - 拖拽结束触发事件

cycler external interface

_$setPosition({x:25,y:25}); 设置初使的位置

_$getPosition(); 获取设置完的位置

更多的参数信息请参照dragger.js api说明

Recycle

如是需要拖动时可以进行回调

dragger.$recycle();

Known Issues

Demo

拖动控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus