English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le projet nécessite la mise en œuvre d'une opération de glisser-déposer, nécessitant que l'on puisse glisser et déposer plusieurs éléments sélectionnés à chaque fois, et que l'on puisse les trier après la libération dans le conteneur cible. Après réflexion, je pense que jQuery-ui est plus approprié, car il fournit le mécanisme d'événement d'interaction nécessaire au projet. Glisser-déposer, libération, tri, sélection, etc. Dans les opérations pratiques, j'ai rencontré de nombreux problèmes, je les expliquerais, et je joindrais également des images et du code.
1.Le cadre bootstrap que j'utilise, intégrant jQuery-Après avoir ajouté la méthode de glisser-déposer à l'élément, une alerte indiquant que cette méthode n'est pas une fonction. En cherchant la cause, c'est bootstrap et jQuery-Le conflit de contrôle de l'identificateur $ de uide. Après avoir intégré jQuery-Ajoutez cette instruction avant le js de l'interface utilisateur
<script> jQuery.noConflict(); </script>
2.jquery-L'interface utilisateur a fourni des opérations de sélection (sélection unique, sélection multiple), où la sélection multiple peut être faite en maintenant Ctrl et en cliquant avec la souris pour sélectionner plusieurs éléments, ou en glissant la souris sur plusieurs éléments pour effectuer une sélection multiple. Lorsque vous ajoutez des opérations de sélection et de glisser-déposer au même élément, des problèmes se sont produits.
a: Les opérations de sélection multiple, en raison de la possibilité de glisser-déposer sur l'élément, entrent en conflit avec l'événement de glisser-déposer lui-même (je pense que l'effet de sélection multiple glisser-déposer avec la souris n'est pas aussi utile que l'utilisation de Shift avec un clic de souris).
b: jQuery-L'interface utilisateur n'a pas trouvé de moyen de glisser-déposer plusieurs éléments individuels en même temps.
Je ne sais pas si c'est à cause de ma propre ignorance que je n'ai pas découvert jQuery-L'interface utilisateur peut utiliser les méthodes et attributs intégrés, à la fois pour la sélection multiple et pour les opérations de glisser-déposer des éléments sélectionnés. Si un lecteur le sait, veuillez me le faire savoir.3Q !
En résumé, j'ai testé plusieurs jQuery-Les attributs et événements de l'interface utilisateur, j'ai essayé de utiliser jQuery-L'opération de glisser-déposer pour la sélection multiple de l'interface utilisateur et la suppression n'ont pas non plus révélé l'effet que j'avais besoin. Alors, après avoir réfléchi, j'ai décidé de ne pas utiliser jQuery-Opérations de sélection de l'interface utilisateur. Écrivez-moi une opération de sélection. Comme le mécanisme de déclenchement d'événements que nous utilisons couramment. (Clic unique avec la souris pour l'option unique, Ctrl+Sélection multiple avec la souris, 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(){
//Méthode de sélection multiple personnalisée
var selected_begin_index,selected_end_index;
$("#mydrag").on("mousedown",".selectable>li",function(e){
var _selectable= $(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //Ne pas appuyer sur les touches Ctrl ou 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){ //Seulement appuyer sur la touche Ctrl
$(this).addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ //Seulement appuyer sur la touche Shift ou sur les touches Ctrl et Shift en même temps
_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){ //Ne pas appuyer sur les touches Ctrl ou Shift
_selectable.children("li").removeClass("ui-selected");
$(this).addClass("ui-selected");
}
});
//Appel de l'événement de glisser-déposer et réorganisation de la gestion
$("#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-surligner",
drop: function( event, ui ) {
//Si ce contenu est glissé-déplacé dans le panneau de tri, il sera exécuté deux fois. Placez ce contenu dans la méthode stop du tri
}
});
//Exécutez l'opération de libération réelle après que le tri soit terminé
$("#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-surligner ui-sortable-handle").text($("#mydrag .selectable>li").eq(selected_li_arr[i]).text());
//Pour cet élément, appliquez l'étiquette de téléversement
$("#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>
Le code est utilisable (aucun effet de libération de choix n'a été écrit, l'exemple actuel est un prototype, qui sera ensuite modifié en mode plug-in). Enregistrez les réflexions des deux derniers jours. Il a fallu beaucoup d'énergie pour trouver le mécanisme des événements, organiser les idées et résoudre les conflits, il faut noter cela.
Voici la totalité du contenu de cet article, j'espère qu'il vous aidera dans vos études, et j'espère que vous soutiendrez également le tutoriel de cri.
Déclaration : Le contenu de cet article est tiré d'Internet, propriété de ses auteurs respectifs. Le contenu est contribué et téléchargé par les utilisateurs d'Internet. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.).