easyui Draggable组件实现拖动效果

来讲解一下 easyui Draggable 组件的使用攻略。

简介

Draggable 是 easyui 中的一个拖动组件，它可以给页面中的任意元素添加拖动功能，支持鼠标和触摸屏两种操作方式。使用 Draggable 组件可以很方便地实现一些拖动、排序、调整位置等功能。

基本用法

Draggable 组件的调用方式如下：

<div id="draggable">这是可拖动的内容</div>
<script>
    $('#draggable').draggable();
</script>

通过 $('#draggable').draggable() 调用 Draggable 组件。此时 #draggable 这个元素就可以随意拖动了。额外说明：Draggable 组件需要引入 jquery.easyui.min.js 和 jquery.easyui.min.css 两个文件。

常用配置

Draggable 组件还有很多配置项，下面是常用配置：

handle

指定一个拖动控制柄，只有在该控制柄上按下鼠标才能移动元素（比如标题栏）。

$('#draggable').draggable({
    handle: '.title'
});

containment

指定拖动元素移动范围。

$('#draggable').draggable({
    containment: 'parent' // 在父元素内移动
});

proxy

设置拖动时所使用的代理元素。

$('#draggable').draggable({
    proxy: 'clone' // 使用克隆的代理元素拖动
});

revert

设置拖动结束后是否返回到原位置。

$('#draggable').draggable({
    revert: true // 返回原位置
});

onStart、onDrag、onStop

拖动开始、拖动中、拖动结束时触发的回调函数。

$('#draggable').draggable({
    onStart: function(){
        console.log('拖动开始');
    },
    onDrag: function(){
        console.log('正在拖动');
    },
    onStop: function(){
        console.log('拖动结束');
    }
});

示例

以下是两个实际示例，帮助你更好地理解 Draggable 组件的用法：

示例一：拖动并排序列表项

<ul id="sortable">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
</ul>
<script>
    $('#sortable li').draggable({
        handle: 'li',
        opacity: 0.7,
        revert: true,
        proxy: 'clone',
        onStop: function(){
            $('#sortable').sortable('refresh');
        }
    });
    $('#sortable').sortable();
</script>

在这个例子中，我们将 Draggable 和 Sortable 组件结合起来，实现了拖动并排序列表项的功能。列表项在拖动时使用克隆的代理元素，并添加了透明度，拖动结束后会触发 onStop 回调函数并刷新 Sortable 组件。

示例二：拖动并调整窗口大小

<div id="demo" style="width: 200px; height: 200px; background-color: #ccc;"></div>
<script>
    $('#demo').draggable({
        handle: 's'
    }).resizable({
        handles: 'n, e, s, w, ne, se, sw, nw'
    });
</script>

在这个例子中，我们给一个 div 元素添加了 Draggable 和 Resizable 组件，通过调用 handle 和 handles，分别实现了在南部移动和在其他部位调整大小的功能。