Jquery UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作
項(xiàng)目需要，實(shí)現(xiàn)一個(gè)拖放操作，要求每次可以拖拽選中的多個(gè)元素，釋放到目標(biāo)容器后可排序?？紤]了一下，覺(jué)得jquery-ui比較合適，畢竟它提供了項(xiàng)目需要的交互性事件機(jī)制。拖拽、釋放、排序、選擇等效果。而在實(shí)際的操作中，遇到個(gè)很多的問(wèn)題，說(shuō)明一下，最后附上效果圖和代碼。
1.本人使用的bootstrap框架，引入jquery-ui后，為元素添加拖拽方法后，提示該方法不是一個(gè)函數(shù)。查找原因，是bootstrap和jquery-uide的$ 標(biāo)識(shí)符控制權(quán)沖突。在引入的jquery-ui的js前加上一下語(yǔ)句解決
<script> jQuery.noConflict(); </script>
2.jquery-ui的提供了選擇操作（單選，多選），其中多選可以按住Ctrl配合鼠標(biāo)單擊多選，也可以鼠標(biāo)在多個(gè)元素上拖拽進(jìn)行多選。在為同一元素添加上選擇操作和拖拽操作時(shí)，出現(xiàn)了問(wèn)題。
a：多選的操作由于可以在元素上拖拽，與本身的拖拽事件有沖突（個(gè)人認(rèn)為鼠標(biāo)拖拽多選的效果并沒(méi)有使用shift配合鼠標(biāo)點(diǎn)擊好用）。
b：jquery-ui沒(méi)有發(fā)現(xiàn)可以將多個(gè)單獨(dú)的元素同時(shí)拖拽。
不知道是本人愚鈍沒(méi)有發(fā)現(xiàn)jquery-ui可以使用本身自帶的方法和屬性，即可以支持多選又能拖拽選中的元素操作。哪位讀者如果知曉還請(qǐng)告知。3Q！
總之，試驗(yàn)了多個(gè)jquery-ui的屬性和事件，有去試著將jquery-ui的拖拽多選操作刪除，也沒(méi)有發(fā)現(xiàn)我需要的效果。所以，考慮了一下，決定不適用jquery-ui的選擇操作。自己來(lái)寫(xiě)一個(gè)選擇操作。與我們平常使用的事件觸發(fā)機(jī)制一樣。（鼠標(biāo)單擊單選，Ctrl+鼠標(biāo)多選，Shift+鼠標(biāo)多選），然后配合jquery-ui的drag和drop和sort事件機(jī)制實(shí)現(xiàn)拖拽排序效果。
再插一嘴，拖拽多個(gè)元素的效果，實(shí)際上是拖拽一個(gè)指定的dom元素，可以將需要拖拽的所有節(jié)點(diǎn)都放置到該元素中。這個(gè)需要配合jquery-ui的drag中的helper函數(shù)，返回一個(gè)新的拖拽元素集合。（關(guān)于jquery-ui的一些事件和屬性大家可從網(wǎng)上查閱。不過(guò)說(shuō)得也不盡詳細(xì)，還需要自己去實(shí)驗(yàn)）。
Okay，貼出簡(jiǎn)單的效果圖和代碼
圖一（拖放中效果）
圖二（釋放后效果）
效果圖如上，左側(cè)橙色為選中的節(jié)點(diǎn)，紅色橢圓內(nèi)部為鼠標(biāo)拖拽的效果，3表示選中的元素呢個(gè)數(shù)；右側(cè)的黃色區(qū)域表示可以釋放和排序的容器。在該區(qū)域拖放時(shí)，節(jié)點(diǎn)會(huì)根據(jù)鼠標(biāo)的位置自動(dòng)排序，如圖，如果釋放鼠標(biāo)后，左側(cè)的3個(gè)節(jié)點(diǎn)就會(huì)移動(dòng)到4.對(duì)應(yīng)的黃色區(qū)域。
當(dāng)然，以上的效果需要去重新給拖拽目標(biāo)賦予新的元素，并且監(jiān)聽(tīng)拖拽，釋放等時(shí)間，編寫(xiě)用戶(hù)自定義的邏輯。貼出自己的代碼，一些事件和屬性可以查閱jquery-ui的文檔。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="assets/css/bootstrap.css" />
<link rel="stylesheet" href="js/jquery-ui-1.12.1.dropable/jquery-ui.css" />
<script src="js/jquery-1.11.2.js"></script>
<script src="assets/js/bootstrap.js"/>
<script>
jQuery.noConflict(); //解決jQuery控制權(quán)沖突問(wèn)題
</script>
<script src="js/jquery-ui-1.12.1.dropable/jquery-ui.js"></script>
<style>
.selectable .ui-selecting{ background: #FECA40; }
.selectable .ui-selected{ background: #F39814; color: white; }
.selectable{ list-style-type: none; margin: 0; padding: 0; width: 80%; }
.selectable li{
list-style: none;
margin: 3px; padding: 0.4em; font-size: 1.4em; height: 32px;moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.drag_info_box{
width:40px;
height:40px;
text-align: center;
font-size:14px;
line-height: 40px;
background: #21aeff;
color:#000000;
}
</style>
<script>
$(function(){
//自定義多選方法
var selected_begin_index,selected_end_index;
$("#mydrag").on("mousedown",".selectable>li",function(e){
var _selectable= $(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //沒(méi)有按下Ctrl或Shift鍵
if(!$(this).hasClass("ui-selected")){
_selectable.children("li").removeClass("ui-selected");
}
$(this).addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if(e.ctrlKey && !e.shiftKey){ //只按下Ctrl鍵
$(this).addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ //只按下Shift鍵或Ctrl和Shift鍵都按下
_selectable.children("li").removeClass("ui-selected");
$(this).addClass("ui-selected");
if(selected_begin_index!=undefined){
selected_end_index=_selectable.children("li").index(this);
}else{
selected_begin_index=_selectable.children("li").index(this);
}
if(selected_end_index>=selected_begin_index){
for(var i=selected_begin_index;i<=selected_end_index;i++){
_selectable.children("li").eq(i).addClass("ui-selected");
}
}else{
for(var i=selected_end_index;i<=selected_begin_index;i++){
_selectable.children("li").eq(i).addClass("ui-selected");
}
}
}
}).on("mouseup",".selectable>li",function(e){
var _selectable= $(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //沒(méi)有按下Ctrl或Shift鍵
_selectable.children("li").removeClass("ui-selected");
$(this).addClass("ui-selected");
}
});
//調(diào)用拖拽事件并重新規(guī)劃處理方式
$("#mydrag .selectable>li").draggable({
revert: "invalid",
containment: "document",
cursor: "default",
distance:10,
zIndex:9,
opacity:0.5,
cursorAt: {
left: 20,
top:40
},
connectToSortable:"#mydrag .sample-group>ol",
helper:function(event,ui){
var drag_info_box=$("<div></div>").addClass("drag_info_box");
drag_info_box.append($("<span></span>"));
drag_info_box.append($('<input type="hidden" />'));
return drag_info_box;
},
start: function( event, ui ) {
var _drag_ele=ui.helper;
_drag_ele.children("span").eq(0).text($("#mydrag .selectable>li.ui-selected").length);
var selected_li_seq="";
$("#mydrag .selectable>li.ui-selected").each(function(){
selected_li_seq+= $("#mydrag .selectable>li").index(this)+",";
});
_drag_ele.children("input").eq(0).val(selected_li_seq.substr(0,selected_li_seq.length-1));
},
stop:function( event, ui ) {
$(".selectable li").removeClass("ui-selected");
}
});
$("#mydrag .sample-group>ol").droppable({
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
//這塊如果是拖放到排序面板會(huì)執(zhí)行兩次,將該內(nèi)容放到排序的stop方法中
}
});
//排序完畢后執(zhí)行真正的釋放操作
$( "#mydrag .sample-group>ol" ).sortable({
revert: true,
stop: function( event, ui ) {
if(ui.item.hasClass("drag_info_box")){
var selected_li_arr=ui.item.children("input").eq(0).val().split(',');
for(var i=0;i<selected_li_arr.length;i++){
var _group_li_=$("<li></li>")
.addClass("ui-state-highlight ui-sortable-handle").text($("#mydrag .selectable>li").eq(selected_li_arr[i]).text());
//為該元素打上上傳標(biāo)簽
$("#mydrag .selectable>li").eq(selected_li_arr[i]).addClass("delete_flag")
$( ".drag_info_box").before(_group_li_);
}
}
$("#mydrag .selectable>li.delete_flag").remove();
$(".drag_info_box").remove();
$(this).sortable();
}
}).disableSelection();
});
</script>
</head>
<body>
<div id="mydrag" style="width:1200px;height: auto;">
<div class="col-sm-4" style="background: #eeeeee">
<ol class="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</div>
<div class="col-sm-4" style="background: greenyellow">
<div class="sample-groups">
<div class="sample-group" style="min-height: 80px;">
<ol>
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ol>
</div>
</div>
</div>
<div class="col-sm-4" style="background: green">
<div class="row">
<div style="background: #ffff00"></div>
<div class="col-sm-5" style="background: blue"></div>
<div class="col-sm-2" style="background: red"></div>
<div class="col-sm-5" style="background: purple"></div>
</div>
</div>
</div>
</body>
</html>
代碼可用（沒(méi)有寫(xiě)單選的釋放效果，例子是目前的一個(gè)試驗(yàn)品，后續(xù)還要改成插件方式）。記錄一下這兩天的心得。主要是查找事件機(jī)制，整理思路和處理沖突問(wèn)題花費(fèi)了一定精力，得記上一筆。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫(xiě)入效果
- jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?附demo源碼下載)
- jquery網(wǎng)頁(yè)元素拖拽插件效果及實(shí)現(xiàn)
- jQuery 版元素拖拽原型代碼
- JQuery拖拽元素改變大小尺寸實(shí)現(xiàn)代碼
- jQuery如何獲取動(dòng)態(tài)添加的元素
- jQuery動(dòng)態(tài)添加、刪除元素的方法
- Jquery顯示、隱藏元素以及添加刪除樣式
- Jquery動(dòng)態(tài)添加及刪除頁(yè)面節(jié)點(diǎn)元素示例代碼
- jquery實(shí)現(xiàn)拖拽添加元素功能
相關(guān)文章
PHP+jQuery實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置
本文講解了如何采用PHP+MySQL+jQuery,實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置。 十分的實(shí)用，有需要的小伙伴可以參考下。2015-04-04
jquery亂碼與contentType屬性設(shè)置問(wèn)題解決方案
讓人頭痛的Jquery亂碼問(wèn)題。其實(shí)這方面文章已經(jīng)很多了，但全面解決各種問(wèn)題的很少，今天總結(jié)一下，方便自己也方便大家,感興趣的朋友可以了解下哦2013-01-01
用戶(hù)可以通過(guò)鼠標(biāo)拖拽柱狀圖從而改變每根柱子的高度，最終達(dá)到通過(guò)鼠標(biāo)拖拽圖形界面來(lái)修改服務(wù)器數(shù)據(jù)的目的。2010-11-11
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片變亮其他變暗效果
jQuery實(shí)現(xiàn)的仿商城圖片變亮變暗效果，鼠標(biāo)懸停圖片之后該圖片變亮，其他圖片變暗。移開(kāi)鼠標(biāo)所有圖片變亮，兼容主流瀏覽器，適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗，有需要的小伙伴可以參考下。2015-05-05
jquery中防刷IP流量軟件影響統(tǒng)計(jì)的一點(diǎn)對(duì)策
由于公司項(xiàng)目需要增加推廣獎(jiǎng)勵(lì)功能，網(wǎng)站用戶(hù)通過(guò)邀請(qǐng)地址發(fā)給QQ好友、論壇、個(gè)人網(wǎng)站之類(lèi)，只要有通過(guò)邀請(qǐng)地址點(diǎn)擊進(jìn)來(lái)就算推廣成功（當(dāng)天同一個(gè)IP僅算一次），推廣人會(huì)獲得相應(yīng)的獎(jiǎng)勵(lì)、積分等。2011-07-07
基于jQuery實(shí)現(xiàn)最基本的淡入淡出效果實(shí)例
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)最基本的淡入淡出效果的方法,實(shí)例分析了jQuery中hide、show、toggle等函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
前些陣子寫(xiě)了個(gè)插件目的就是能夠像.net 的 Requst.QuerySting["param"]那樣獲取地址欄參數(shù)?，F(xiàn)在拿出來(lái)和大家分享。感覺(jué)這個(gè)插件還是蠻有用的。2010-10-10
自己動(dòng)手開(kāi)發(fā)jQuery插件教程
首先要了解jQuery插件開(kāi)發(fā)分兩種，1.類(lèi)級(jí)別的插件開(kāi)發(fā)。2.對(duì)象級(jí)別插件開(kāi)發(fā)。什么? 你居然問(wèn)什么是類(lèi)級(jí)別和什么是對(duì)象級(jí)別?2011-08-08
Jquery響應(yīng)回車(chē)鍵直接提交表單操作代碼
這篇文章主要介紹了Jquery響應(yīng)回車(chē)鍵直接提交表單操作代碼,推薦使用keyup哦,文中有說(shuō)明,需要的朋友可以參考下2014-07-07
如何從jQuery的ajax請(qǐng)求中刪除X-Requested-With
X-Requested-With常用于判斷是不是ajax請(qǐng)求，ajax請(qǐng)求中刪除X-Requested-With的方法如下，感興趣的朋友可以參考下2013-12-12