Draggable(拖动框)

Posted alaic2052243080

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Draggable(拖动框)相关的知识,希望对你有一定的参考价值。

一、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‘);//返回代理元素

以上是关于Draggable(拖动框)的主要内容,如果未能解决你的问题,请参考以下文章

如何知道拖动了哪个类draggable

当输入框字符串长于框大小时,Vue Sortable + Draggable 不起作用

EasyUI Draggable 可拖动

EasyUI系列学习-Draggable(拖动)

JQueryUI-拖动(Draggable)-约束运动

第一百九十三节,jQuery EasyUI,Draggable(拖动)组件