<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>
相关推荐
交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。 微件 主要是一些界面的扩展，包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,...
jQuery UI的核心在于它的组件，这些组件是预先封装好的UI元素，如Accordion（手风琴）、Autocomplete（自动完成）、Button（按钮）、Calendar（日历，即日期选择器）、Dialog（对话框）、Draggable（可拖动）、...
最新官方jQuery UI插件 主流特效Demo，绝不含糊。 好东西不需要过多的言辞修饰，下了就知道！ 所有效果说明： 基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
Draggable Droppable Resizable Selectable Sortable 部件 Accordion Datepicker Dialog Progressbar Slider Tabs 动画 AddClass RemoveClass Animate Effect Hide Show SwitchClass Toggle ToggleClass
- 开发者可以通过jQuery UI的Draggable和Droppable组件实现这一功能，同时利用事件机制增加交互反馈。 **2. 实例二：Sortable** - 对于一个任务管理应用，用户可能希望对任务列表进行重新排序。 - 通过使用...
jQuery UI是一款基于JavaScript库jQuery的开源组件集合，它提供了丰富的用户界面功能，包括可拖动、可 Droppable、可 Resizable、可 Selectable 的元素，以及可自定义的弹出对话框、下拉菜单、日期选择器、滑块等...
交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。 微件 主要是一些界面的扩展，包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,...
这个压缩包"jqueryUI包"包含了完整的 jQuery UI 库，允许开发者轻松地为网页添加各种交互元素，提升用户体验。 在 jQuery UI 中，主要包含以下组件： 1. **主题**: jQuery UI 提供了可定制的主题，允许开发者根据...
[Interactions] Draggable Droppable Resizable Selectable Sortable ...These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started.
《jQuery UI 1.9.2：一个强大的前端交互库》 jQuery UI 是基于 jQuery JavaScript 库的一个扩展，它提供了一系列可定制的用户界面组件，包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个“jquery-ui-...
### jQuery UI 插件使用详解 #### 一、概述 jQuery UI 是一款基于 jQuery 的用户界面库，提供了丰富的用户交互组件和效果。它不仅简化了前端开发中的许多复杂任务，如拖拽、排序等，还提供了多种视觉效果，极大地...
- `jquery.ui.selectable.js` **调用方法：** ```javascript $("#selectable").selectable(); ``` **参数说明：** - 无。 **事件：** - **selectstart**: 开始选择时触发。 - **selecting**: 选择过程中触发。 ...
### jQuery UI使用手册知识点概述 #### jQuery UI简介 jQuery UI是一个基于jQuery的用户界面库，它为jQuery框架提供了一套丰富的用户界面交互小部件。尽管在功能上可能与extjs的ui存在一定的差距，但jQuery UI的...
### jQuery UI 手册 #### 一、简介 jQuery UI 是一个基于 jQuery 的用户界面库，它提供了一系列的用户界面插件，如可拖拽、可排序、对话框等组件，以及一组视觉主题来帮助开发者快速创建丰富的网页应用。本手册将...
交互部件是一些与鼠标交互相关的内容，包括缩放（Resizable） , 拖动（Draggable） , 放置（Droppable） , 选择（Selectable） , 排序（Sortable）等。 小部件（Widgets） 主要是一些界面的扩展，包括折叠面板...
1. 拖放（Draggable, Droppable）：实现页面元素的拖动和放置功能，可以用于排序列表、重新组织列表项等。 2. 选择器（Selectable, Sortable）：允许用户选择和排序元素。 3. 可调整大小的组件（Resizable）：可以...
这是jQuery UI的核心部分，包括日期选择器（Datepicker）、对话框（Dialog）、下拉菜单（Autocomplete）、滑块（Slider）、排序列表（Sortable）、可拖放元素（Draggable）和可吸附元素（Droppable）等。这些小部件...
8. **可下拉目标(Droppable)**：Droppable组件定义了元素可以接受其他元素（由Draggable组件拖动）的位置。`.droppable()`方法与.draggable()结合使用，实现拖放交互，如文件上传或元素移动。 9. **可选择区域...