easyUI 基本拖拽和释放 Basic Drag and Drop

六 20

easyUI 教程 » 基本拖拽和释放

本教程将告诉你如何使HTML元素可拖动
例如，我们将创建三个DIV元素，然后启用拖拽和释放。

本教程将告诉你如何使HTML元素可拖动例如，我们将创建三个DIV元素，然后启用拖拽和释放。

基本拖拽和释放 Basic Drag and Drop

首先，我们创建三个<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>元素，我们通过克隆原始元素创建代理的方式来实现拖拽。

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

对于第三个<div>元素，我们通过创建自定义代理的方式来实现拖拽

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

下载拖拽实例代码: easyui-drag-drop-demo.zip

anakin Says:
八月 20th, 2010 at 12:17
非常棒的easyui教程站点。
莱鸟飞飞 Says:
三月 1st, 2011 at 21:50
还是看不明白。。。怎么执行函数呢？
fasdfas Says:
四月 19th, 2011 at 16:42
fasdfasdfasdfasdfasdfafffffffasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasfasdfasfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfas

jQuery easyUI 中文档案