jQuery UI draggable+droppable+resizable+selectable+sortable
<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>
相關文章
- 1. jQuery UI
- 2. jquery ui
- 3. Jquery UI
- 4. JQuery UI 入門
- 5. 學習jQuery UI
- 6. jQuery ui 框架
- 7. JS——jquery UI
- 8. 學習 jQuery UI
- 9. jQuery UI(五)
- 10. jQuery筆記——UI
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • jQuery Mobile 網格 - jQuery Mobile 教程
- • RxJava操作符（六）Utility
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery UI
- 2. jquery ui
- 3. Jquery UI
- 4. JQuery UI 入門
- 5. 學習jQuery UI
- 6. jQuery ui 框架
- 7. JS——jquery UI
- 8. 學習 jQuery UI
- 9. jQuery UI(五)
- 10. jQuery筆記——UI