• Draggable(拖动框)


    一、class加载方式

        <div id="box" class="easyui-draggable" style="400px;height:200px;background:red">

              内容部分
        </div>

    二、js加载

       $("#box").draggable({})

    三、关于draggable的属性、事件、方法

       $("#box").draggable({ 

    //属性

         revert:true, //设置为 true,则拖动停止时返回起始位置,默认为false
         cursor : 'move',//拖动时的 CSS 指针样式 move/pointer/text/wait等 默认为move
         handle:'#pos' //开始拖动的句柄 值为选择器 默认为null
        disabled : true, //设为true停止拖动 默认为false
        edge : 50, //可以在其中拖动的容器的宽度 值为number 默认为0
        axis:"v" //设置拖动为垂直'v',还是水平'h' 默认为null
       deltaX : 10, // 被拖动的元素对应于当前光标位置 x 值为number 默认为null
       deltaY : 10, // 被拖动的元素对应于当前光标位置 y 值为number 默认为null
       proxy: 'clone',
       proxy: function(source){}, //当使用'clone',则克隆一个替代元素拖动。 如果指定一个函数,则自定义替代元素。

    //事件
      onBeforeDrag : function (e) { alert('拖动之前触发!'); //return false; }, 返回 false 将取消拖动
      onStartDrag : function (e) { alert('拖动时触发!'); },
      onDrag : function (e) { alert('拖动过程中触发!'); }, 不能拖动时返回 false
      onStopDrag : function (e) { alert('在拖动停止时触发!'),

      onStartDrag : function (e) { console.log($('#box').draggable('proxy')); }, //返回代理元素需和 proxy: 'clone'一起使用,可输出其代理元素

    });
    //方法
      console.log($('#box').draggable('options')); //返回属性对象
      $('#box').draggable('disable'); //禁止拖动
      $('#box').draggable('enable'); //允许拖放

      $('#box').draggable('proxy');//返回代理元素

  • 相关阅读:
    C/C++中浮点数输出格式问题
    C/C++中的输出对齐设置
    C++11 中的initialize_list
    c++中的构造函数初始化列表
    C++11中的array
    STL 中的链表排序
    poj1068 Parencodings
    poj 3295 Tautology
    How To Join XLA_AE_HEADERS and RCV_TRANSACTIONS(子分类账到事务处理追溯)
    销售订单的四个主要环节和每个环节用到的常用表
  • 原文地址:https://www.cnblogs.com/Alaic2052243080/p/11427215.html
Copyright © 2020-2023  润新知