Draggable(拖动框)

Posted 2022-09-06 alaic2052243080

一、class加载方式

    <div id="box" class="easyui-draggable" style="width: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‘)；//返回代理元素