基于Query可水平垂直自由拖拽代码是一款基于drag.js插件实现的支持水平拖拽，垂直拖拽，自由拖拽等不同特效。

在线预览    源码下载

实现的代码。

html代码：

   <p>只能水平拖动</p>
    <div class='box box-1'>
        <dl><img src="img/01.jpg" width=150 height=150 /></dl>
    </div>
    <p>只能垂直拖动</p>
    <div class='box box-2'>
        <dl><img src="img/02.jpg" width=150 height=150 /></dl>
    </div>
    <p>自由拖动，初始位置固定</p>
    <div class='box box-3'>
        <dl><img src="img/03.jpg" width=150 height=150 /></dl>
    </div>
    <p>自动拖动，初始位置随机</p>
    <div class='box box-4'>
        <dl><img src="img/04.jpg" width=150 height=150 /></dl>
        <dl><img src="img/05.jpg" width=150 height=150 /></dl>
        <dl><img src="img/06.jpg" width=150 height=150 /></dl>
        <dl><img src="img/07.jpg" width=150 height=150 /></dl>
    </div>
    <p>自动拖动，初始位置随机，hander拖动</p>
    <div class='box box-5'>
        <dl><i class='hander'>拖我</i><img src="img/04.jpg" width=150 height=150 /></dl>
        <dl><i class='hander'>拖我</i><img src="img/05.jpg" width=150 height=150 /></dl>
        <dl><i class='hander'>拖我</i><img src="img/06.jpg" width=150 height=150 /></dl>
        <dl><i class='hander'>拖我</i><img src="img/07.jpg" width=150 height=150 /></dl>
    </div>

via：http://www.w2bc.com/article/100003

在线预览    源码下载