Draggable插件有2种方式实现

第一种 通过标记创建Draggable元素

1
2
3
< div  id = "dra"  class = "easyui-draggable"  data-options = "handle:'#title'"   style = "width:100px;height:100px;" > 
    < div  id = "title"  style = "background:red;" >Draggable元素</ div >
</ div >

第二种 使用 javascript代码创建Draggable元素

先编写HTML代码


1
2
3
< div  id = "dra"  style = "width:100px;height:100px;" > 
    < div  id = "title"  style = "background:#ccc;" >Draggable元素</ div >
</ div >

在编写JS代码创建Draggable元素:通过ID加载


1
2
3
4
5
6
7
8
9
10
$( '#dra' ).draggable({ 
   handle: '#title' ,  //启动可拖动的处理
   //如果需要停止拖动可以设置disabled为true
   revert: true ,  //拖动后返回开始位置
   proxy: function (source){  // 创建代理对象
       var  p = $( '<div style="border:1px solid #ccc;width:80px"></div>' );
       p.html($(source).html()).appendTo( 'body' );
       return  p;
   };
});