easyui Draggable组件实现拖动效果

easyui做为叁个装进了JQusey的UI插件,其实照旧蛮好用的,最少省了像自个儿这种渣渣相当多年华。

JQuery easyui (1) Draggable(拖动)组件,jqueryeasyui

特不习贯这种免强式的上学,但什么人叫自身不是老师了,所以依然调控有始有终演习,顺带为博客加点东西。纵然自个儿或然很抵触长时间内惯性的去纯熟二个工具。

easyui做为多少个封装了JQusey的UI插件,其实依旧非常好用的,起码省了像作者这种渣渣超级多光阴。

 

Draggable的加载方式有两种:

1,通过class加载,如下:

1 <div id="box" class="easyui-draggable"></div>

1,通过JS加载,如下:

$('#box').draggable();

如上两点必要小心的是随意是’easyui-draggable’,照旧draggable
都以稳定的,他们都以通过调用easyui已经写好的函数,来兑现jQuery效果的。

 

Draggable的属性:

  revert    当班值日为true时,拖动截止时回来开端地方,能够到处拖。

revert : boolean,

 

  axis  限定拖动的大方向,水平’h’?垂直’v’?这几个和
revert组合起来比较风趣,设置拖动方向为

      垂直的话就跟Wechat,和讯刷新新闻一点差距也未有于。

axis : String/'v'/'h',

 

  proxy  克隆,就是拖动的时候要拖动的指标不改变,然后在鼠标上复制一个要拖动的靶子,当然也

      能够是任何的,可以触发function。

proxy : null/String/function,

  然后还会有不菲别的的属性,感到并非专程有趣。

cursor : move/String ,     //指定拖动时候指针的CSS样式 变得美美哒
deltaX : null/number,
deltaY : null/number,    //被拖动的元素对应于当前光标位置的x,y  就是给被   拖动元素与光标一个距离
handle : null/selector    //开始拖动的句柄   手柄!只能用手柄拖动!对的!
disabled : boolean        //设置为true是,不能拖动当先绑定的元素
edge : number             //可以在其中拖动的容器的宽度  从容器的上下左右往里算 ,就像一个矩形里面包着一个矩形 ,然后里面那只有鼠标放在里面矩形的时候元素才能被拖动   

 例子:

$('#box').draggable({
    revert : true,
    cursor: 'text',
    handle : '#pox',
    disabled : false,
    edge : 50,
    axis :'v',
    proxy : 'clone',
    deltaX: 10,
    deltaY : 10,
    proxy: function(source){
        console.log('呵呵哒!');
    }
});

 

Draggable的事件:

  onBeforeDrag  拖动从前接触,再次回到false将注销拖动

onBeforeDrag : function (e){
    alert('拖动之前触发');
    return false;
}

  onStartDrag 拖动时接触

onStartDrag : function(e){
    alert('拖动时触发');
}

 

  onDrag 拖动进度中触发,不能够拖动事再次回到false

onDrag : function(e){
    alert('拖动过程触发');
}

  onDrag 结束拖动时接触

onStopDrag : function (e){
    alert('在拖动停止时触发');
}

 Draggable 方法列表

 

  options 重返属性对象

console.log($('#box').draggable('options'));

 

    proxy 若是代理属性棉被服装置则赶回该拖动代理成分

console.log($('#box').draggable('proxy'));

  

  enable 能够被拖动

$('#box').draggable('enable');

 

  disable 防止被拖动

$('#box').draggable('disable');

 

以上差不离正是Easyui 1.2.5  Draggable的所有的事品质,事件和办法了,
若是有怎么着难堪的话,应接商酌,一同探究和求教。

 


easyui (1)
Draggable(拖动)组件,jqueryeasyui
特别不习贯这种强制式的上学,但什么人叫本人不是先生了,所以如故调整坚韧不拔演练,顺带为博客…

Draggable的加载方式有二种:

1,通过class加载,如下:

div /div

通过JS加载,如下:

$('#box').draggable();

如上两点供给静心的是随意是’easyui-draggable’,依旧draggable
都以素来的,他们都是通过调用easyui已经写好的函数,来落到实处jQuery效果的。

Draggable的属性:

revert 当班值日为true时,拖动结束时回来开头地点,能够随地拖。

revert : boolean,

axis 限定拖动的大势,水平’h’?垂直’v’?这一个和
revert组合起来比较有意思,设置拖动方向为

笔直的话就跟Wechat,新浪刷新音讯未有差距于。

axis : String/’v’/’h’,

proxy
克隆,就是拖动的时候要拖动的目的不改变,然后在鼠标上复制三个要拖动的靶子,当然也

能够是别的的,可以触发function。

proxy : null/String/function,
然后还恐怕有众多别样的质量,感到并不是专程有意思。

cursor : move/String , //钦定拖动时候指针的CSS样式 变得美美哒deltaX :
null/number,deltaY : null/number, //被拖动的因素对应于方今光标地方的x,y
正是给被 拖动成分与光标一个相差handle : null/selector //最初拖动的句柄
手柄!只可以用手柄拖动!对的!disabled : boolean
//设置为true是,不能够拖动超过绑定的要素edge : number
//能够在内部拖动的容器的肥瘦 从容器的光景左右往里算
,就疑似叁个矩形里面包着三个矩形
,然后里面那独有鼠标放在里面矩形的时候成分技能被拖动

例子:

$('#box').draggable({ revert : true, cursor: 'text', handle : '#pox', disabled : false, edge : 50, axis :'v', proxy : 'clone', deltaX: 10, deltaY : 10, proxy: function(source){ console.log('呵呵哒!'); }});

Draggable的事件:

onBeforeDrag 拖动以前接触,重回false将注销拖动

onBeforeDrag : function (e){ alert('拖动之前触发'); return false;}

onStartDrag 拖动时接触

onStartDrag : function(e){ alert('拖动时触发');}

onDrag 拖动进度中触发,不能拖动事重回false

onDrag : function(e){ alert('拖动过程触发');}

onDrag 结束拖动时接触

onStopDrag : function (e){ alert('在拖动停止时触发');}

Draggable 方法列表

options 重临属性对象

console.log($('#box').draggable('options'));

proxy 倘诺代理属性被安装则赶回该拖动代理成分

console.log($('#box').draggable('proxy'));

enable 能够被拖动

$('#box').draggable('enable');

disable 禁止被拖动

$('#box').draggable('disable');

笔者们来看个简易的例证

pre html meta charset="UTF-8" titleBasic Draggable - jQuery EasyUI Demo/title link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css" link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css" link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css" script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"/script script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"/script h2Basic Draggable/h2 pMove the boxes below by clicking on it with mouse./p div data-options="handle:'#title'"  div 容器里面的内容/div /div script $(function () { $("#title").draggable({ proxy: function (a) { var a = $('div 你拖我干啥/div'); a.appendTo('body'); return a; }, cursor: 'pointer', edge: '6' }); }); /script /prebrbr

如上差不离正是Easyui 1.2.5 Draggable的成套属性,事件、方法和演示了,
若是有哪些窘迫的话,接待钻探,一齐座谈和求教。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图