• 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');//返回代理元素

  • 相关阅读:
    android onTouchEvent
    AD smart pdf 中文丢失
    c# 定时器
    Android 绘制圆环
    52道Python面试题
    螺旋填数:读入两个整数m,n,输出一个m行n列的矩阵,这个矩阵是1~m*n这些自然数按照右、下、左、上螺旋填入的结果。
    Java经典练习题_Day04
    Java经典练习题_Day05
    Java 面向对象 初探
    Java Array 方法和使用
  • 原文地址:https://www.cnblogs.com/Alaic2052243080/p/11427215.html
Copyright © 2020-2023  润新知