easyui Draggable组件实现拖动效果

前端之家收集整理的这篇文章主要介绍了easyui Draggable组件实现拖动效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间。

Draggable的加载方式有两种:

1,通过class加载,如下:

Box" class="easyui-draggable">

通过JS加载,如下:

Box').draggable();

以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的,他们都是通过调用easyui已经写好的函数,来实现jQuery效果的。

Draggable的属性

  revert 当值为true时,拖动停止时返回起始位置,可以到处拖。

revert : boolean,

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

      垂直的话就跟微信,微博刷新消息一样。

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将取消拖动

  onStartDrag 拖动时触发

  onDrag 拖动过程中触发,不能拖动事返回false

  onDrag 停止拖动时触发

 Draggable 方法列表

  options 返回属性对象

Box').draggable('options'));

  proxy 如果代理属性被设置则返回该拖动代理元素

Box').draggable('proxy'));

  enable 可以被拖动

Box').draggable('enable');

  disable 禁止被拖动

Box').draggable('disable');

我们来看个简单的例子

<Meta charset="UTF-8">

Basic Draggable - jQuery EasyUI Demo

以上差不多就是Easyui 1.2.5 Draggable的全部属性,事件、方法和示例了,如果有什么不对的话,欢迎评论,一起讨论和赐教。

猜你在找的JavaScript相关文章