Draggable拖动 | 易学教程

Draggable(拖动)组件
学习要点：
1、加载方式
2、属性列表
3、事件列表
4、方法列表

EasyUI中Draggable（拖动）组件的使用方法，这个组件不依赖于其他组件。

1、加载方式
//class方式
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:orange;">
</div>

//JS调用
<div id="box" style="width:400px;height:200px;background:orange;">
</div>
$(function(){
$("#box").draggable();
});

2、属性
名称类型描述默认值
revert boolean 回复，如果设置为true的话，拖动结束后元素将返回它的起始位置 false
cursor string 光标，拖动时的css光标(cursor) move
handle selector 句柄，启动可拖动的处理句柄，就是只有哪个组件才可以拖动元素 null
edge number 边缘，能够在其中开始可拖动的拖动宽度，就是指容器的边缘区域，边缘区域无法拖动，边缘表示所有容器的边 0
proxy string,function 代理，拖动时要使用的代理对象，设置为“clone”时，克隆元素将被用作代理。如果指定一个函数，它必须返回一个jQuery对象，这个jquery对象也就是代理对象
deltax number 拖动的元素相当于当前光标的x轴位置,只有启动代理才生效 null
deltaY number 拖动的元素相当于当前光标y轴的位置，只有启动代理才生效 null
disabled boolean 如果设置为true，则可停止拖动 false
axis string 轴，定义拖动元素可在其上移动的轴，可用‘v’或者‘h’ null

3、事件
名称参数描述
onBeforeDrag e 拖动前触发，返回false就取消拖动
onStartDrag e 目标开始拖动时触发
onDrag e 拖动期间触发，返回false将不进行实际的拖动
onStopDrag e 拖动停止时触发

4、方法
名称参数描述
options none 返回选项（options）属性（property）
proxy none 如果设置了代理（proxy）就返回拖动代理（proxy）
这个只有在拖动时有效，我们把它放在开是拖动的事件中

enable none 启用拖动动作
disable none 禁用拖动动作

设置默认值对象：$.fn.draggable.defaults重写默认对象
$fn.draggable.defaults.cursor = 'text';

<html>
<title>index</title>
<head>
<meta charset="UTF-8">
   
    <script type="text/javascript" src="../../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../../js/01/t2.js"></script>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
</head>
<body>
    <!--
   <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:orange;">
   </div>
   -->
   <div id="box" style="width:400px;height:200px;background:orange;">
        <span id="pox">拖动区域</span>
   </div>
</body>
</html>



$(function(){
    $.fn.draggable.defaults.cursor = 'text';
    $("#box").draggable({
        //revert : true,
        //cursor : "text",
        //handle : "#pox",
        //edge : 50
        proxy : "clone",
        //proxy : function(source){
            //var p = $('<div style="border:1px solid red; width:400px; height:200px;"></div>');
            //p.html($(source).html()).appendTo("body");
            //return p;
        //},
        //deltaX : 50,
        //deltaX : 50
        //disabled : true,
        //axis : 'v'
        //onBeforeDrag : function(e){
            //alert("拖动前触发"); 
        //}
        //onBeforeDrag : function(e){
            //return fasle;
        //}
        //onStartDrag : function(e){
            //alert("拖动开始时触发");
            //console.log($('#box').draggable('proxy'));
        //}
        //onDrag : function(e){
            //alert("拖动过程中触发");
        //}
        //onStopDrag : function(e){
            //alert("拖动结束后触发");
        //}
    });
    
    //$('#box').draggable('disable');
    //$('#box').draggable('enable');
    //console.log($('#box').draggable('options'));
    //console.log($('#box').draggable('options'));
    
});

来源：https://www.cnblogs.com/aigeileshei/p/6738311.html

标签

draggable