jQuery EasyUI使用教程之基本的拖放

<jQuery EasyUI最新版下載>

本教程將爲你展現如何使HTML元素可拖動。在這個示例中咱們將建立3個DIV元素，而後使它們可以被拖動。

查看演示

首先，咱們建立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元素，咱們能夠經過建立一個複製原始元素的代理使其可拖動。

$( '#dd2' ).draggable({

proxy: 'clone'

});

對於第三個div元素，咱們能夠經過建立一個自定義的代理使其可拖動。

$( '#dd3' ).draggable({

proxy: function (source){

var p = $( '<div class="proxy">proxy</div>' );

p.appendTo( 'body' );

return p;

}

});

下載該EasyUI示例：easyui-dnd-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！