English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Da das Projekt eine Drag-and-Drop-Operation erfordert, muss es jedes Mal mehrere ausgewählte Elemente ziehen und loslassen können, und nach dem Loslassen in das Zielcontainer sortiert werden können. Nach einigen Überlegungen dachte ich, dass jQuery-ui ist angemessen, da es das Interaktionsereignismechanismus, den das Projekt benötigt, bietet. Ziehen und Loslassen, Sortieren, Auswählen und andere Effekte. Bei der praktischen Verwendung habe ich viele Probleme, werde sie erläutern und am Ende die Abbildung und den Code hinzufügen.
1.Ich verwende das Bootstrap-Framework, jQuery-ui hinzugefügt wurde, wird eine Meldung angezeigt, dass die Methode keine Funktion ist. Nach der Suche nach dem Grund fand ich heraus, dass Bootstrap und jQuery-Der $-Bezeichner von uide hat Konflikt mit der Kontrolle. Nachdem jQuery-Fügen Sie vor dem jQuery der UI folgendes Statement hinzu, um das Problem zu lösen
<script> jQuery.noConflict(); </script>
2.jquery-UI bietet Auswahloperationen (Einzelauswahl, Mehrfachauswahl) an, bei denen die Mehrfachauswahl sowohl mit Strg und Mausklick als auch durch Ziehen mehrerer Elemente auf dem Mauszeiger durchgeführt werden kann. Bei der hinzufügung von Auswahl- und Zieheoperationen für das gleiche Element trat ein Problem auf.
a: Die Mehrfachauswahl hat aufgrund des Ziehens auf dem Element mit dem eigenen Ziehevent einen Konflikt (persönlich halte ich den Effekt der mehrfachen Auswahl durch Mausklick mit Shift nicht so gut wie die Kombination aus Shift und Mausklick).
b: jQuery-UI habe ich nicht gefunden, dass mehrere separate Elemente gleichzeitig gezogen und gelassen werden können.
Ich weiß nicht, ob ich dumm bin und jQuery-UI kann die eigenen Methoden und Attribute verwenden, die sowohl Mehrfachauswahl als auch Ziehen und Loslassen ausgewählter Elemente unterstützen. Wenn jemand weiß, bitte informieren Sie mich.3Q!
Zusammenfassend lässt sich sagen, dass ich mehrere jQuery-UI-Attribute und Ereignisse, habe versucht, jQuery-UI-Ziehen und Loslassen mehrfach auswählen Operation löschen, habe ich auch nicht den gewünschten Effekt gefunden. Also habe ich darüber nachgedacht und beschlossen, jQuery nicht zu verwenden-UI-Selektionsoperationen. Schreiben Sie selbst eine Selektionsoperation. Dies ist ähnlich wie das tägliche Ereignistriggermechanismus, den wir verwenden. (Mausklick für Einzelauswahl, Ctrl+Maus mehrfach auswählen, Shift+鼠标多选），然后配合jquery-ui的drag和drop和sort事件机制实现拖拽排序效果。
再插一嘴，拖拽多个元素的效果，实际上是拖拽一个指定的dom元素，可以将需要拖拽的所有节点都放置到该元素中。这个需要配合jquery-ui的drag中的helper函数，返回一个新的拖拽元素集合。（关于jquery-ui的一些事件和属性大家可从网上查阅。不过说得也不尽详细，还需要自己去实验）。
Okay，贴出简单的效果图和代码
图一（拖放中效果）
图二（释放后效果）
效果图如上，左侧橙色为选中的节点，红色椭圆内部为鼠标拖拽的效果，3表示选中的元素个数；右侧的黄色区域表示可以释放和排序的容器。在该区域拖放时，节点会根据鼠标的位置自动排序，如图，如果释放鼠标后，左侧的3个节点就会移动到4.对应的黄色区域。
当然，以上的效果需要去重新给拖拽目标赋予新的元素，并且监听拖拽，释放等时间，编写用户自定义的逻辑。贴出自己的代码，一些事件和属性可以查阅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控制权冲突问题
</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(){
//Individuelle Mehrfachauswahlmethode
var selected_begin_index,selected_end_index;
$("#mydrag").on("mousedown",".selectable>li",function(e){
var _selectable=$(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //Keine Strg- oder Umschalttaste gedrückt
if(!$(this).hasClass("ui");-selected");
_selectable.children("li").removeClass("ui-selected");
}
$("#mydrag .selectable>li").addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if(e.ctrlKey && !e.shiftKey){ //Nur die Ctrl-Taste gedrückt
$("#mydrag .selectable>li").addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ //Nur die Shift-Taste oder Shift und Ctrl gleichzeitig gedrückt
_selectable.children("li").removeClass("ui-selected");
$("#mydrag .selectable>li").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){ //Keine Strg- oder Umschalttaste gedrückt
_selectable.children("li").removeClass("ui-selected");
$("#mydrag .selectable>li").addClass("ui-selected");
}
});
//Aufruf des Drag-Events und Neuplanung der Verarbeitung
$("#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 ) {
//这部分如果是拖放到排序面板会执行两次，将该内容放到排序的stop方法中
}
});
//排序完成后执行真正的释放操作
$("#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());
//为此元素添加上传标签
$("#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>
Der Code ist verwendbar (Es wurde keine Single-Choice-Release-Wirkung geschrieben, das Beispiel ist derzeit ein Prototyp, der später in eine Plugin-Weise geändert werden soll). Notieren Sie sich die Eindrücke der letzten beiden Tage. Es wurde viel Energie in die Suche nach dem Ereignismechanismus, die Strukturierung der Gedanken und die Lösung von Konflikten investiert, das sollte aufgeschrieben werden.
Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und dass Sie die Anleitung für Rufen stark unterstützen.
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört den Urhebern. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Inhalte entdecken, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine Meldung senden, und fügen Sie relevante Beweise bei. Bei nachgewiesener Täuschung wird diese Website den verdächtigen Inhalt sofort löschen.)