jQuery UI draggable+droppable+resizable+selectable

本文转自：http://www.cnblogs.com/dreamhome/archive/2012/11/22/2783177.html

<script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script>
<script language="JavaScript" type="text/javascript" src="ui/jquery-ui-1.9.1.custom.js"></script>
<!--<script language="JavaScript" type="text/javascript" src="ui/jquery.ui.datepicker-zh-CN.js"></script>-->
<link rel="stylesheet" type="text/css" href="ui/jquery-ui-1.9.1.custom.css">


<!--==============================draggable===========================-->
<!--==================================================================-->
<input type="button" value="draggable_fun" onclick="draggable_fun();" />
<div id="draggable_div" class="ui-widget-content"><!--将想要可拖拽的部分用div括起来，也可以用其他网页标签括起来，被括起来的地方可添加任意内容-->
    <p>Drag me around</p>
    <br/>
    i can fly!
</div>
<script language="JavaScript" type="text/javascript">
$("#draggable_div").draggable({
    //=================属性
    addClasses             : true,                  //如果设置成false，将在加载时阻止ui-draggable样式的加载。当有很多对象要加载draggable()插件的情况下，这将对性能有极 大的优化。默认值  true
    appendTo               : "parent",              //用来指定控件在拖拽过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.默认值  "parent"
    axis                   : false,                 //约束拖拽的动作只能在X轴或Y轴上执行，可选值："数值", "数值"。默认值  false
    cancel                 : "input",               //防止在指定的对象上开始拖拽可用JQuery选择器写法来指定。默认值  "input,textarea,button,select,option"
    connectToSortable      : false,                 //允许draggable被拖拽到指定的sortables中可用JQuery选择器写法来指定，如果使用此选项helper属性必须设置成clone 才能正常工作。默认值  false
    containment            : false,                 //强制draggable只允许在指定元素或区域的范围内移动，可选值："parent", "document", "window", [ 数值, 数值, 数值, 数值 ].默认值  false
    cursor                 : "auto",                //指定在做拖拽动作时，鼠标的CSS样式。默认值  "auto"
    cursorAt               : {                      //当开始移动时，鼠标定位在的某个位置上（最多两个方向）。可选值：{ top, left, right, bottom }.默认值  false
        left : 5
    },
    delay                  : 0,                     //当鼠标点下后，延迟指定时间后才开始激活拖拽动作（单位：毫秒）。此选项可以用来防止不想要的拖累元素时的误点击。默认值  0
    disabled               : false,                 //如果设成true则draggable实例不能使用。默认值  false
    distance               : 1,                     //当鼠标点下后，只有移动指定像素后才开始激活拖拽动作。默认值  1
    grid                   : false,                 //拖拽元素时，只能以指定大小的方格进行拖拽。可选值： [数值,数值] 默认值  false
    handle                 : false,                 //限制只能在拖拽元素内的指定元素开始拖拽，可用JQuery选择器写法来指定。默认值  false
    helper                 : "original",            //拖拽元素时的显示方式。（如果是函数，必须返回值是一个DOM元素）可选值："original", "clone", Function默认值  "original"
    iframeFix              : true,                  //可防止当mouseover事件触发拖拽动作时，移动过iframes并捕获到它（内部内容），如果设置成true，则屏蔽层会覆盖页面的 iframe。如果设置成对应的选择器，则屏蔽层会覆盖相匹配的iframe。默认值  false
    opacity                : 0.35,                  //当元素开始拖拽时，改变元素的透明度。默认值  false
    refreshPositions       : false,                 //如果设置成true，所有移动过程中的坐标都会被记录。（注意：此功能将影响性能）默认值  false
    revert                 : false,                 //当元素拖拽结束后，元素回到原来的位置。默认值  false
    revertDuration         : 500,                   //当元素拖拽结束后，元素回到原来的位置的时间。（单位：毫秒）默认值  500
    scope                  : "default",             //设置元素只允许拖拽到具有相同scope值的元素。默认值  "default"
    scroll                 : true,                  //如果设置为true，元素拖拽至边缘时，父容器将自动滚动。默认值  true
    scrollSensitivity      : 20,                    //当元素拖拽至边缘时，父窗口一次滚动的像素。默认值  20
    scrollSpeed            : 20,                    //当元素拖拽至边缘时，父窗口滚动的速度。默认值  20
    snap                   : "div",                 //当设置为true或元素标签时，元素拖拽到其它元素的边缘时，会自动吸附其它元素。默认值  false
    snapMode               : "both",                //确定拖拽的元素吸附的模式。可选值："inner", "outer", "both"默认值  "both"
    snapTolerance          : 20,                    //确定拖拽的元素移动至其它元素多少像素的距离时，发生吸附的动作。默认值  20
    stack                  : "div",                 //控制匹配元素的z-index值，使当前拖拽的对象始终在匹配元素之前，而且似乎要控制匹配的元素只能以其HTML标签名来匹配.默认值  false
    zIndex                 : 100,                   //控制当拖拽元素时，改变元素的z-index值。默认值  false

    //=================事件
    create                 : function(event, ui){   //当创建draggable时触发
        //alert("this is create");
    },
    start                  : function(event, ui){   //当鼠标开始拖拽时，触发此事件。
        //alert("this is start");
    },
    drag                   : function(event, ui){   //当鼠标拖拽移动时，触发此事件。
        //alert("this is drag");
    },
    stop                   : function(event, ui){   //当移动结束鼠标松开时，触发此事件。
        //alert("this is stop");
    }
});

function draggable_fun(){
    //=================方法
    //$( "#draggable_div" ).draggable("destroy");              //从元素中移除拖拽功能。
    $( "#draggable_div" ).draggable("disable");                //禁用元素的拖拽功能。
    $( "#draggable_div" ).draggable("enable");                 //启用元素的拖拽功能。
    $( "#draggable_div" ).draggable("option","disabled",false);//为指定属性赋值，第二参数为draggable的一个属性名，第三参数为可以为该属性赋的值
    $( "#draggable_div" ).draggable("option","disabled");      //获取指定属性的值，第二参数为draggable的一个属性名
    $( "#draggable_div" ).draggable("widget");                 //返回该可拖拽元素的JQuery对象
}
</script>




<!--==============================droppable===========================-->
<!--==================================================================-->
<input type="button" value="droppable_fun" onclick="droppable_fun();" />
<div id="droppable_div" class="ui-widget-content"><!--将想要可拖放的部分用div括起来，也可以用其他网页标签括起来，被括起来的地方可添加任意内容-->
    <p>Drop here</p>
</div>
<script language="JavaScript" type="text/javascript">
$("#droppable_div").droppable({
    //=================属性
    accept        : "*",                                   //仅允许符合JQuery选择器的元素激活拖放的事件。（如果是函数，则此函数会在页面上所有元素被调用，函数的返回值必须是布尔值。）默认值  "*"
    activeClass   : "ui-state-highlight",                  //如果设置值，则当有拖拽事件发生时，为页面上所有允许（accept）的元素添加此样式。默认值  false
    addClasses    : true,                                  //设置为false，可以阻止ui-droppable样式添加至可拖放的对象。（这样可以获取一定的性能优化） 默认值  true
    disabled      : false,                                 //如果设成true则droppable实例不能使用。默认值  false
    greedy        : false,                                 //是否防止嵌套的droppable事件被传播。默认值  false
    hoverClass    : "drop-hover",                          //当拖拽元素移至带有可拖放插件的元素上时，为元素添加指定的样式。默认值  false
    scope         : "default",                             //设置元素只允许具有相同scope值拖拽元素激活此拖放元素。默认值  "default"
    tolerance     : "touch",                               /*判断一个可拖拽元素被“放到”一个可拖放元素的判断模式。（可选值："fit", "intersect", "pointer", "touch"）默认值  "intersect"
                                                             fit：拖拽元素完全覆盖拖放元素
                                                             intersect：拖拽元素至少50%覆盖拖放元素
                                                             pointer：鼠标指针重叠在可拖放元素上
                                                             touch：只要有任何重叠即发生
                                                           */
    //=================事件
    create        : function(event, ui) {                  //当创建droppable时触发
        //alert("this is create");
    },
    activate      : function(event, ui) {                  //当任何可拖拽元素开始拖拽动作时激活此事件。
        //alert("this is activate");
    },
    deactivate    : function(event, ui) {                  //当任何可拖拽元素停止拖拽动作时激活此事件。
        //alert("this is deactivate");
    },
    over          : function(event, ui) {                  //当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素时激活。
        //alert("this is over");
    },
    out: function(event, ui) {                             //当一个被允许（accept）的可拖拽元素移出可拖放元素时激活。
        //alert("this is out");
    },
    drop: function(event, ui) {                            //当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素，松开鼠标时激活。
        //alert("this is drop");
    }
});

function droppable_fun(){
    //=================方法
    //$( "#droppable_div" ).droppable("destroy");                         //从元素中移除拖放功能。
    $( "#droppable_div" ).droppable("disable");                           //禁用元素的拖放功能。
    $( "#droppable_div" ).droppable("enable");                            //启用元素的拖放功能。
    $( "#droppable_div" ).droppable("option","disabled",false);           //为指定属性赋值，第二参数为droppable的一个属性名，第三参数为可以为该属性赋的值
    $( "#droppable_div" ).droppable("option","disabled");                 //获取指定属性的值，第二参数为droppable的一个属性名
    $( "#droppable_div" ).droppable("widget");                            //返回该可拖放元素的JQuery对象
}
</script>




<!--==============================resizable===========================-->
<!--==================================================================-->
<input type="button" value="resizable_fun" onclick="resizable_fun();" />
<div id="resizable_div" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>
<script language="JavaScript" type="text/javascript">
$("#resizable_div").resizable({
    //=================属性
    alsoResize       : false,                                  //当调整元素大小时，同步改变符合JQuery选择器的另一个（或一组）元素的大小。默认值  false
    animate          : true,                                   //在调整元素大小结束之后是否显示动画默认值  false
    animateDuration  : "slow",                                 //动画效果的持续时间。（单位：毫秒）可选值："slow" , "normal" , "fast" 默认值  "slow"
    animateEasing    : "easeOutBounce",                        //选择何种动画效果。默认值  "swing"
    aspectRatio      : false,                                  //如果设置为true，则元素的可调整尺寸受原来高宽比的限制。例如：9 / 16, or 0.5 默认值  false
    autoHide         : false,                                  //如果设置为true，则默认隐藏掉可调整大小的手柄，除非鼠标移至元素上。默认值  false
    cancel           : "input,textarea,button,select,option",  //阻止resizable插件加载在与你匹配的元素上。默认值  "input,textarea,button,select,option"
    containment      : false,                                  //控制元素只能在某一个元素的大小之内改变。允许值："parent" , "document" , DOM元素 , 或一个选择器。默认值  false
    delay            : 0,                                      //以毫秒为单位，当发生鼠标点击手柄改变大小，延迟多少毫秒后才激活事件。默认值  0
    disabled         : false,                                  //如果设成true则resizable实例不能使用。默认值  false
    distance         : 1,                                      //以像素为单位，当发生鼠标点击手柄改变大小，延迟多少像素后才激活事件。默认值  1
    ghost            : true,                                   //如果设置为true，则在调整元素大小时，有一个半透明的辅助对象显示。默认值  false
    grid             : false,                                  //设置元素调整的大小随网格变化，允许的数据为数组：[数值,数值]。默认值  false
    handles          : "e, s, se",                             //设置resizable插件允许生成在元素的哪个边上，可选值：n, e, s, w, ne, se, sw, nw, all。默认值  "e, s, se"
    helper           : "resizable-helper",                     //一个CSS类，当调整元素大小时，将被添加到辅助元素中，一但调整结束则恢复正常。默认值  false
    maxHeight        : 1500,                                   //设置允许元素调整的最大高度。默认值  null
    maxWidth         : 1500,                                   //设置允许元素调整的最大宽度。默认值  null
    minHeight        : 10,                                     //设置允许元素调整的最小高度。默认值  10
    minWidth         : 10,                                     //设置允许元素调整的最小宽度。默认值  10

    //=================事件
    create           : function(event, ui) {                   //当创建resizable时触发
        //alert("this is create");
    },
    start            : function(event, ui) {                   //当元素调整动作开始时触发。
        //alert("this is start");
    },
    resize           : function(event, ui) {                   //当元素调整动作过程中触发。
        //alert("this is resize");
    },
    stop             : function(event, ui) {                   //当元素调整动作结束时触发。
        //alert("this is stop");
    }
});

function resizable_fun(){
    //=================方法
    //$("#resizable_div").resizable("destroy");               //从元素中移除缩放功能。
    $("#resizable_div").resizable("disable");                 //禁用元素的缩放功能。
    $("#resizable_div").resizable("enable");                  //开启元素的缩放功能。
    $("#resizable_div").resizable("option","disabled",false); //为指定属性赋值，第二参数为resizable的一个属性名，第三参数为可以为该属性赋的值
    $("#resizable_div").resizable("option","disabled");       //获取指定属性的值，第二参数为resizable的一个属性名
    $("#resizable_div").resizable("widget");                  //返回该可缩放元素的JQuery对象
}
</script>











<!--==============================selectable==========================-->
<!--==================================================================-->
<!--
创建多选实例前必须至少先指定两个css类的背景色 .ui-selecting .ui-selected 分别是在可选元素被选择时，和选定后添加的css类
并且为了灵活定义多个可多选部分不同的样式，在定义该css类时最好加上所属作用范围这里是#selectable_div
-->
<style>
    #selectable_div .ui-selecting { background: #FECA40; }/*选择某个项目时添加该css类*/
    #selectable_div .ui-selected { background: #F39814;  }/*选定了某个项目时添加该css类*/

    /*这个样式类则显得不那么重要了，可以不设定，可被多选的元素将添加该css类*/
    .ui-selectee { background: white;  }
</style>
<input type="button" value="selectable_fun" onclick="selectable_fun();" />
<!--通过按 Ctrl 可以点击选择多项-->
<div id="selectable_div">
    <div class="ui-widget-content">Item 1</div>
    <div class="ui-widget-content">Item 2</div>
    <div class="ui-widget-content">Item 3</div>
    <div class="ui-widget-content">Item 4</div>
    <div class="ui-widget-content">Item 5</div>
    <div class="ui-widget-content">Item 6</div>
    <div class="ui-widget-content">Item 7</div>
    <div class="ui-widget-content">Item 8</div>
    <div class="ui-widget-content">Item 9</div>
</div>
<script language="JavaScript" type="text/javascript">
$("#selectable_div").selectable({
    //=================属性
    appendTo            : "body",                             //指定选择过程中将辅助元素追加到何处。默认值  "body"
    autoRefresh         : true,                               //决定是否在每次选择动作时，都重新计算每个选择元素的坐标和大小。如果你有很多个选择项的话，建议设置成false并通过方法手动刷新。默认值  true
    cancel              : "textarea,button,select,option",    //防止在与选择器相匹配的元素上发生选择动作。默认值  "input,textarea,button,select,option"
    delay               : 0,                                  //以毫秒为单位，设置延迟多久才激活选择动作。此参数可防止误点击。默认值  0
    disabled            : false,                              //如果选择true则该selectable实例将不能使用。默认值  false
    distance            : 0,                                  //决定至少要在元素上面拖动多少像素后，才正式触发选择的动作。默认值  0
    filter              : "*",                                //设置哪些子元素才可以被选择。默认值  "*"
    tolerance           : "touch",                            //可选值："touch", "fit"，分别代表完全和部署覆盖元素即触发选择动作。默认值  "touch"
    //=================事件
    create              :function(event, ui) {
        //alert("this is create");                            //当创建selectable时触发
    },
    selected            :function(event, ui) {                //当选定某一个元素后触发此事件。
         //alert("this is selected");
     },
    selecting           :function(event, ui) {                //当选择某一个元素中时触发此事件。
         //alert("this is selecting");
     },
    start               :function(event, ui) {                //当选择一个元素前触发此事件。
         //alert("this is start");
     },
    stop                :function(event, ui) {               //当选定一个元素结束时触发此事件。
         //alert("this is stop");
     },
    unselected          :function(event, ui) {               //当取消选定某一个元素后触发此事件。
        //alert("this is unselected");
    },
    unselecting         :function(event, ui) {               //当取消选定某一个元素中触发此事件。
        //alert("this is unselecting");
    }
});
function selectable_fun(){
    //=================方法
    //$("#selectable_div").selectable("destroy");             //销毁元素多选功能实例
    $("#selectable_div").selectable("disable");               //禁用元素的多选功能。
    $("#selectable_div").selectable("enable");                //启用元素的多选功能。
    $("#selectable_div").selectable("option","disabled",true);//为指定属性赋值，第二参数为selectable的一个属性名，第三参数为可以为该属性赋的值
    $("#selectable_div").selectable("option","disabled");     //获取指定属性的值，第二参数为selectable的一个属性名
    $("#selectable_div").selectable("refresh");               //用于手动刷新、重新计算每个选中元素的位置和大小。当autoRefresh设置成false，此方法对于刷新大量选中项非常有用。
    $("#selectable_div").selectable("widget");                //返回该可多选元素的JQuery对象
}
</script>








<!--==============================sortable============================-->
<!--==================================================================-->
<input type="button" value="sortable_fun" onclick="sortable_fun();" />
<div id="sortable_div">
    <div class="ui-state-default">Item 1</div>
    <div class="ui-state-default">Item 2</div>
    <div class="ui-state-default">Item 3</div>
    <div class="ui-state-default">Item 4</div>
    <div class="ui-state-default">Item 5</div>
    <div class="ui-state-default">Item 6</div>
    <div class="ui-state-default">Item 7</div>
</div>
<script language="JavaScript" type="text/javascript">
$("#sortable_div").sortable({
    //=================属性
    appendTo              : "parent",                                           //指定排序过程中将辅助元素追加到何处。默认值  "parent"
    axis                  : "y",                                                //指定条目的拖动方向。可选值："x", "y"。默认值  false
    cancel                : ":input,button",                                    //指定禁止排序的元素。默认值  ":input,button"
    connectWith           : false,                                              //允许排序列表连接另一个排序列表，将条目拖动至另一个列表中去，可用JQuery选择器形式。默认值  false
    containment           : false,                                              //约束排序动作只能在一个指定的范围内发生。可选值：DOM对象, "parent", "document", "window", 或jQuery对象。默认值  false
    cursor                : "move",                                             //指定排序时鼠标的CSS样式。默认值  "auto"
    cursorAt              : {                                                   //指定拖动条目时，光标出现的位置，取值是对象，可以包含top、left、right、Bottom属性中的一个或两个。 默认值 false
        top:5,
        left: 5
    },
    delay                 : 0,                                                  //以毫秒为单位，设置延迟多久才激活排序动作。此参数可防止误点击。默认值  0
    disabled              : false,                                              //当设为true时该排序实例将不可用。默认值  false
    distance              : 1,                                                  //决定至少要在元素上面拖动多少像素后，才正式触发排序动作。默认值  1
    dropOnEmpty           : true,                                               //是否允許拖拽到一個空列表的sortable对象中。默认值  true
    forceHelperSize       : false,                                              //是否强制辅助元素具有尺寸。默认值  false
    forcePlaceholderSize  : false,                                              //是否强制占有符具有尺寸。默认值  false
    grid                  : [ 20, 10 ],                                         //使条目或辅助元素对齐网格，取值为数组 [数值,数值] 分别表示网格的宽度和高度。默认值  false
    handle                : false,                                              //指定条目的拖动手柄，可用JQuery选择器形式。默认值  false
    helper                : "original",                                         //指定显示的辅助元素，可选值："original"或"clone"，若为函数则函数返回一个DOM元素。默认值  "original"
    items                 : "> *",                                              //指定列表中可以排序的条目。默认值  "> *"
    opacity               : 0.5,                                                //指定辅助元素的不透明度0.01~1。默认值  false
    placeholder           : "sortable-placeholder",                             //指定排序时，空白占位的CSS样式。默认值  false
    revert                : true,                                               //是否支持动画效果，或指定动画毫秒数。默认值  false
    scroll                : true,                                               //是否元素拖动到边缘时自动滚动。默认值  true
    scrollSensitivity     : 20,                                                 //指定元素拖动到距离边缘多少像素时开始滚动。默认值  20
    scrollSpeed           : 20,                                                 //指定滚动的速度。默认值  20
    tolerance             : "intersect",                                        //设置拖动元素拖动多少距离时开始排序，可选值："intersect"和"pointer"，前者表示重叠50%，后者表示重叠。默认值  "intersect"
    zIndex                : 1000,                                               //指定辅助元素的z-Index值。默认值  1000
    //=================事件
    create                :function(event, ui) {                                //当创建sortable实例时触发
        //alert("this is create");
    },
    start                 :function(event, ui) {                                //当开始排序时触发
        //alert("this is start");
    },
    sort                  :function(event, ui) {                                //当排序期间触发
        //alert("this is sort");
    },
    change                :function(event, ui) {                                //当元素发生排序且坐标已发生改变时触发此事件。
        //alert("this is change");
    },
    beforeStop            :function(event, ui) {                                //当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。
        //alert("this is beforeStop");
    },
    stop                  :function(event, ui) {                                //排序动作结束时触发此事件。
        //alert("this is stop");
    },
    update                :function(event, ui) {                                //当排序动作结束时且元素坐标已经发生改变时触发此事件。
        //alert("this is update");
    },
    receive               :function(event, ui) {                                //当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。
        //alert("this is receive");
    },
    remove                :function(event, ui) {                                //当一个元素从一个sortable对象拖了出来，并进入另一个sortable对象时触发
        //alert("this is remove");
    },
    over                  :function(event, ui) {                                //当一个元素拖拽移动时覆盖其他元素位置时触发此事件。
        //alert("this is over");
    },
    out                   :function(event, ui) {                                //当一个元素拖拽移出原位置并再次确定位置后，或移动超出sortable对象位置范围时触发此事件。
        //alert("this is out");
    },
    activate              :function(event, ui) {                                //当一个sortable对象开始排序动作时，该事件关联到所有与该实例连接着的排序列表。
        //alert("this is activate");
    },
    deactivate            :function(event, ui) {                                //当排序停止后触发，该事件关联到所有与该实例连接着的排序列表
        //alert("this is deactivate");
    }

});

function sortable_fun(){
    //=================方法
    $("#sortable_div").sortable( "cancel" );                                    //取消当前sortable对象中item元素的排序改变。
    //$("#sortable_div").sortable( "destroy" );                                 //销毁该sortable对象。
    $("#sortable_div").sortable( "disable" );                                   //禁用该sortable对象排序功能
    $("#sortable_div").sortable( "enable" );                                    //开启该sortable对象排序功能
    $("#sortable_div").sortable( "option" , "disabled" , false );               //为指定属性赋值，第二参数为sortable的一个属性名，第三参数为可以为该属性赋的值
    $("#sortable_div").sortable( "option" , "disabled" );                       //获取指定属性的值，第二参数为sortable的一个属性名
    $("#sortable_div").sortable( "refresh" );                                   //刷新排序的元素。触发重新加载的所有排序的元素，使新元素可用。
    $("#sortable_div").sortable( "refreshPositions" );                          //刷新排序条目的缓存位置
    $("#sortable_div").sortable( "serialize", { key: "sort" } );                //将项目ID排序成一个form或ajax的提交字符串，提交时key对应的值相当表单中的元素名，调用此方法产生的哈希值，可以附加到任何URL
    $("#sortable_div").sortable( "toArray" );                                   //将排序的条目id序列化成字符串数组
    $("#sortable_div").sortable( "widget" );                                    //返回该排序的JQuery对象
}
</script>