黑马程序员技术交流社区

标题: 分享JQuery EasyUI的学习笔记: 可拖动组件-draggable [打印本页]
作者: heshiwei    时间: 2015-9-22 09:57
标题: 分享JQuery EasyUI的学习笔记: 可拖动组件-draggable
最简单的调用:
  1.         $(function (){
  2.                 $('#box').draggable({
  3.                 });
  4.         });
复制代码

属性
        Proxy null/string/function 当使用clone，则克隆一个代替元素拖动，如果指定一个函数，则自定义替代元素
        Revert  false/boolean  设置为true则停止时返回起始位置
        cursor move/string 拖动时的鼠标css样式
        deltaX null/number 被拖动的元素相对于当前元素的光标位置x
        deltaY null/number 被拖动的元素相对于当前元素的光标位置y
        handle null/selector 开始拖动的句柄
        disabled false/boolean 设置为true，则禁止拖动
        edge 0/number 可拖动部分距离整个边缘的宽度
        axis null/string 设置拖动的方向：v->垂直  h->水平

事件
        onBeforeDrag e 开始之前触发，返回false将取消拖动
        onStartDrag e 拖动开始时触发
        onDrag e 拖动过程中触发，直到不能拖动时返回false
        onStopDrag e 拖动停止时触发
       
方法
        options none 返回属性对象
        proxy none 如果代理属性被设置则返回该拖动代理元素
        enable none 使得允许拖动
        disable none 使得禁止拖动

以上所有属性、事件、方法的用法：
  1. <script type="text/javascript">
  2.         $(function (){
  3.                 $('#box').draggable({
  4.                         revert:true,
  5.                         cursor:'text',
  6.                         handle:null,
  7.                         disabled:false,
  8.                         edge:0,
  9.                         axis:null,

  11.                         onBeforeDrag:function (e){
  12.                                 // alert('beforeDrag');
  13.                         },
  14.                         onStartDrag:function (e){
  15.                                 // console.log(e);
  16.                         },
  17.                         onDrag:function (e){
  18.                                 // console.log(e);
  19.                         },
  20.                         onStopDrag:function (e){
  21.                                 // alert('stop');
  22.                         }
  23.                 });

  25.                 $('#box').draggable('disable')
  26.                 console.log( $('#box').draggable('options') );
  27.         });

  29. </script>
复制代码




作者: heshiwei    时间: 2015-9-22 10:00
沙发自己坐!
初学阶段的记录，基本是属性介绍。
和Java没有太大关系，主要是用来做后台界面、OA界面。
可以和JavaWeb搭配做一个管理系统。
希望能帮助大家！




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2