easyUI 基础的拖动和放置

@author YHC

这个教程向你展示如何使HTML元素可拖动,如下例,我们将创建3个div元素然后启用他们的拖动和放置.

查看DEMO

首先我们创建3个div元素

<div id="dd1" class="dd-demo"></div>  
<div id="dd2" class="dd-demo"></div>  
<div id="dd3" class="dd-demo"></div>  

对于第一个div元素,我们通过默认值让其可以拖动.

$('#dd1').draggable();  

对于第二个div元素,我们通过一个代理(proxy)克隆(clone)原来的元素让其可以拖动.

$('#dd2').draggable({  
    proxy:'clone'  
});

对于第三个div元素,我们将通过创建自定义代理(proxy)让其可以拖动.

$('#dd3').draggable({  
    proxy:function(source){  
        var p = $('<div class="proxy">proxy</div>');  
        p.appendTo('body');  
        return p;  
    }  
});  

下载EasyUI 示例:

easyui-dnd-demo.zip