03.draggable 可被拖动插件 ，droppable 可容纳拖动插件 与resizable 可调整大小插件

1. draggable可被拖动插件

1.1 渲染方式

class型

    <div class="easyui-draggable" style="width:400px;height:600px;background:orange;">        这是可拖动的组件     </div>

js型

<div id="draggableBox">     这是可拖动的组件</div><script type="text/javascript">    $(function(){        $('#draggableBox').draggable();    });</script>

1.2 属性

可以通过$.fn.draggable.defaults修改默认属性值如

    $.fn.draggable.defaults.deltaY = 50;//放在延迟加载外面

$(function(){    $('#draggableBox').draggable({        revert:false,//默认为false，设为true时拖动停止返回起始位置        cursor:"move",//拖动时指针的样式，可设为text或pointer等        disabled:false,//默认为false，设为true时不可拖动        edge:3,//默认为0，设置容器不可拖动边缘的宽度        axis:'h',//默认为null，'h'为可水平拖动，'v'为可垂直拖动        handle:'#header',//默认为null,拖动的手柄        proxy : function(source){            var p = $('<div style="width:400px;height:200px;border:1px solid grey"></div>');            p.html($(source).html()).appendTo('body');            return p;        },//默认为null，设为'clone'时复制本身作为拖动对象，          //可以设置function 定制拖动对象        deltaX : 100,//默认为null，启用proxy才有效，拖动对象相对光标偏移量        deltaY : 100,//默认为null，启用proxy才有效，拖动对象相对光标偏移量    });});

1.3 事件

(function(){    $('#draggableBox').draggable({        onBeforeDrag : function(e){            console.log('拖动之前触发!');            //return false;//返回false取消拖动        },        onStartDrag : function(e){            console.log('start');        },        onDrag : function(e){//拖动过程中多次触发，不能拖动时返回false            console.log('e drag');        },        onStopDrag: function(e){            console.log('stop');        }    });});

1.4 方法

$('#draggableBox').draggable({onStartDrag : function(e){  console.log('start');  console.log($('#draggableBox').draggable('proxy'));//返回代理jquery对象},});console.log($('#draggableBox').draggable('options'));//返回所有属性和事件，包括默认的$('#draggableBox').draggable('disable');//禁止拖动$('#draggableBox').draggable('enable');//允许拖动

2. droppable 可容纳拖动插件

droppable是可容纳拖动插件的插件，拖动插件拖入容纳插件时触发各种事件，但并不是改变文档元素内容的层级，用firebug查看文档元素结构并没有变化。

2.1 渲染方式

class型

    <div class="easyui-droppable"        data-options="            accept:'#acceptBox,#acceptBox2',            onDragEnter:function(e,source){                $(this).css('background','darkorange');            },            onDragLeave:function(e,source){                $(this).css('background','orange');            }        "         style="width:300px;height:300px;background:orange">         droppable box    </div>    <div id="acceptBox" class="easyui-draggable" style="width:140px;height:120px;background:grey;">        这是可拖动的框     </div> 

js型

 <div id="droppableBox" style="width:300px;height:300px;background:orange">    droppable box </div><div id="acceptBox" class="easyui-draggable" style="width:140px;height:120px;background:grey;">    这是可拖动的框 </div> <div id="acceptBox2" style="width:140px;height:120px;background:grey;">    这是可拖动的框2 </div> <script type="text/javascript">    $(function(){        $('#droppableBox').droppable({            accept:'#acceptBox,#acceptBox2',            onDragEnter:function(e,source){                $(this).css('background','blue');            },            onDragLeave:function(e,source){                $(this).css('background','orange');            }        });        $('#acceptBox2').draggable({        });    });</script>

2.2 属性

可以通过$.fn.draggable.defaults修改默认属性值如

    $.fn.draggable.defaults.disabled = true;//放在延迟加载外面

$(function(){    $('#droppableBox').droppable({        accept:'#acceptBox,#acceptBox2',//默认是null，jq选择器        disabled:false,//默认是false    });});

2.3 事件

$(function(){    $('#droppableBox').droppable({        accept:'#acceptBox,#acceptBox2',//默认是null，jq选择器        disabled:false,//默认是false        onDragEnter:function(e,source){//进入放置区时触发            console.log('enter');            $(this).css('background','blue');        },        onDragLeave:function(e,source){//离开放置区时触发            console.log('leave');            $(this).css('background','orange');        },        onDragOver:function(e,source){//经过放置区时触发            console.log('over');            $(this).css('background','green');        },        onDrop:function(e,source){//放入（松开左键）放置区时触发            console.log('drop');            console.log(source)//source 是dom元素            $(this).css('background','maroon');        }    });    $('#acceptBox2').draggable({    });});

2.4 方法

console.log($('#droppableBox').droppable('options'));//返回所有属性和事件    $('#droppableBox').droppable('disable');//禁用放置功能    $('#droppableBox').droppable('enable');//启用放置功能

3. resizable 可调整大小插件

3.1 渲染方式

class型

<div class="easyui-resizable"    data-options="        maxWidth:600,        maxHeight:400    "     style="width:300px;height:300px;border:1px solid #666">     resizable box</div>

js型

<div id="resizableBox" style="width:300px;height:300px;background:orange">   resizable box rendered by js</div><script type="text/javascript">$(function(){    $('#resizableBox').resizable({        maxWidth:600,        maxHeight:400    });});</script>

3.2 属性

可以通过$.fn.draggable.defaults修改默认属性值如

$.fn.resizable.defaults.handles = 'e,s';//放在延迟加载外面

$(function(){    $('#resizableBox').resizable({        disabled:false,//默认为false，设为true时不启用调整大小功能        maxWidth:600,//调整大小时最大宽度        maxHeight:400,//调整大小时最大高度        minWidth:100,//调整大小时最小宽度        minHeight:100,//调整大小时最小宽度        edge:30,//默认为5，可用于触发调整大小的边缘宽度        handles:'se,e'//默认为'all',可用于调整大小的方位，有n,e,s,w,ne,se,sw,nw    });});

3.3 事件

$(function(){    $('#resizableBox').resizable({        onStartResize: function(e){//开始调整时触发            console.log('start');        },        onResize:function(e){//调整时多次触发，返回false时调整期间不会改变DOM大小            console.log('resizing');            //return false;        },        onStopResize:function(e){//停止调整时触发            console.log('stop');        },    });});

3.4 方法

console.log($('#resizableBox').resizable('options'));//返回所有属性和事件$('#resizableBox').resizable('disable');//禁用调整大小功能$('#resizableBox').resizable('enable');//启用调整大小功能