【easyui学习笔记】2.easyui拖放-1

学习参考：EasyUI中文网教程

使用easyui可以非常简单地使 HTML 元素可拖动，为元素加上draggable即可。

1、拖放的基本形式：拖放本体

实时拖放HTML元素本体，是我们最常见的一种形式，也是实现起来最简单的一种。
如下，先设置一个div色块（色块容易观察效果），只是简单的html语法：

<div id="dd1" class="dd-demo" style="width:100px;height:100px;background-color: orange"></div>

然后就是easyui的活了，用js的形式赋予html元素easyui的插件效果：

<script type="text/javascript">
        $('#dd1').draggable();
</script>

保存后刷新页面试试，看原来的div色块是不是可以拖动了。（不过是加了一句简单至极的js而已，就实现了这种略geek范的效果，easyui不愧其easy之名！萌新感动中……）。

2、拖放的增强形式：替身之术

所谓的替身，正式名称叫做代理（proxy），从效果上来说可以认为它是拖动元素的一个预览（拖动元素，在你松开鼠标左键之前，元素本体在原地不动，而当前光标下显示的是代理，而不是元素本体）。
实现代理的方式也很简单，在设置draggable时，传入参数项proxy即可。
为了对比效果，我们加入一个新的div，用不同的颜色区分：

<div id="dd2" class="dd-demo" style="width: 100px;height: 100px;background-color: red"></div>

设置dd2的拖放效果：

<script type="text/javascript">
        $('#dd1').draggable();
        $('#dd2').draggable({
            proxy:'clone'
        });
</script>

这里proxy:'clone' 的意思很明显，直译即可：代理：'克隆' ，也就使用本体一模一样的克隆当做代理（替身），预览显示。影分身之术

2.1 自定义代理

代理还可以自定义，这就赋予了它非常大的灵活性，下面我们来举个例子。
老规矩，新建个div色块来演示：

<div id="dd3" class="dd-demo" style="width: 100px;height: 100px;background-color: grey"></div>

然后，给dd3自定义个代理：

<script type="text/javascript">
    $('#dd1').draggable();
    $('#dd2').draggable({
        proxy:'clone'
    });
    $('#dd3').draggable({
        proxy:function(source){
                var p = $('<div class="proxy">我是自定义代理呦╮(╯▽╰)╭</div>');
                p.appendTo('body');
                return p;
        }
    });
</script>

接下来就是见证奇迹的时刻……开玩笑的233
例子中的自定义代理是一个div，里边只有文本而已，所以看起来还是蛮丑的，但是原理清楚了，你可以对它做一些修改：

• 你可以给这个自定义代理的div设置下style，弄成色块，效果拔群。
• 你也可以不用div当做代理，可以随便定义个什么元素作为自定义的代理……

所谓的自定义，就是发挥你的想象力，接下来就随便搞了~