Implementazione dell'operazione di trascinamento di più elementi selezionati con Jquery UI

Il progetto richiede di implementare un'operazione di trascinamento e rilascio, che richiede di poter trascinare più elementi selezionati in una volta, e di poterli ordinare dopo averli rilasciati nel contenitore di destinazione. Dopo aver pensato un po', ho pensato che jquery-ui sia adatto, poiché fornisce il meccanismo di eventi di interazione necessari per il progetto. Trascinamento, rilascio, ordinamento, selezione e altri effetti. Tuttavia, durante l'operazione pratica, ho incontrato molti problemi, descriverò qui di seguito e allegherò anche l'immagine e il codice.

1. Ho utilizzato il framework bootstrap, dopo aver introdotto jquery-ui, ho aggiunto il metodo di trascinamento agli elementi e ho ricevuto un messaggio di errore che diceva che il metodo non è una funzione. Ho cercato la causa e ho scoperto che c'è un conflitto di controllo del simbolo $ tra bootstrap e jquery-ui. Per risolvere il problema, aggiungi la seguente frase prima di introdurre il js di jquery-ui

<script>
  jQuery.noConflict();
</script>

2. jquery-ui fornisce operazioni di selezione (selezione singola, selezione multipla), tra cui la selezione multipla può essere selezionata multipla tenendo premuto Ctrl e facendo clic con il mouse, o trascinando più elementi con il mouse per selezionare. Quando si aggiungono operazioni di selezione e trascinamento allo stesso elemento, si verificano problemi.

a: L'operazione di selezione multipla ha conflitto con l'evento di trascinamento dell'elemento stesso poiché può essere trascinata (ritengo che l'effetto di selezione multipla tramite trascinamento del mouse non sia così utile come utilizzare Shift insieme al clic del mouse).

b: jquery-ui non ha trovato un modo per trascinare contemporaneamente più elementi singoli.

Non so se sono io che sono stupido e non ho notato che jquery-ui può utilizzare i metodi e le proprietà integrati, che possono supportare l'operazione di selezione multipla e trascinamento degli elementi selezionati. Se qualcuno sa, per favore avvisami. Grazie!

In sintesi, ho testato molte proprietà e eventi di jquery-ui, ho anche provato a rimuovere l'operazione di selezione multipla di trascinamento di jquery-ui, ma non ho trovato l'effetto di cui avevo bisogno. Pertanto, dopo aver pensato un po', ho deciso di non utilizzare l'operazione di selezione di jquery-ui. Scriverò una selezione da solo. Come il meccanismo di attivazione degli eventi che utilizziamo di solito. (Clicca con il mouse per selezionare singolarmente, Ctrl + clicca con il mouse per selezionare multipli, Shift + clicca con il mouse per selezionare multipli), quindi abbinato al meccanismo di eventi drag e drop e sort di jquery-ui per implementare l'effetto di ordinamento tramite trascinamento.

Aggiungo un'osservazione, l'effetto di trascinamento di più elementi è in realtà il trascinamento di un elemento DOM specifico, puoi mettere tutti i nodi che devono essere trascinati in questo elemento. Questo richiede la collaborazione della funzione helper nel drag di jquery-ui, che restituisce una nuova raccolta di elementi trascinabili. (Riguardo a eventi e proprietà di jquery-ui, puoi cercare su internet. Tuttavia, non sono dettagliati, è necessario sperimentare da soli).

Okay, pubblica un semplice effetto visivo e codice

Figura 1 (effetto durante il trascinamento)

Figura 2 (effetto dopo il rilascio)

L'effetto visivo è come sopra, la parte sinistra arancione rappresenta il nodo selezionato, la parte interna ellittica rossa rappresenta l'effetto di trascinamento del mouse, 3 rappresenta il numero di elementi selezionati; la parte destra gialla rappresenta il contenitore in cui è possibile rilasciare e ordinare. Trascinando in questa area, i nodi si ordinano automaticamente in base alla posizione del mouse, come nella figura, se rilasci il mouse, i tre nodi di sinistra si sposteranno nella posizione 4 nella parte gialla corrispondente.

Certo, gli effetti sopra richiedono di assegnare nuovi elementi ai punti di trascinamento e di ascoltare gli eventi di trascinamento e rilascio, scrivendo logica personalizzata. Pubblica il tuo codice, alcune proprietà e eventi possono essere consultati nella documentazione di 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();　　//Risolvi il conflitto di controllo 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(){
　　　　　　　//Custom multi-select method
   var selected_begin_index,selected_end_index;
   $("#mydrag").on("mousedown",".selectable>li",function(e){
    var _selectable= $(this).parent();
    if(!e.ctrlKey && !e.shiftKey){ //Non è stato premuto Ctrl o 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){ // Pressing only Ctrl key
     $(this).addClass("ui-selected");
     selected_begin_index=_selectable.children("li").index(this);
    }else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ // Pressing only Shift key or both Ctrl and Shift keys
     _selectable.children("li").removeClass("ui-selected");
     $(this).addClass("ui-selected");
     if(selected_begin_index!=undefined){
      selected_end_index=_selectable.children("li").index(this);
     }
      selected_begin_index=_selectable.children("li").index(this);
     }
     if(selected_end_index>=selected_begin_index){
      else{
       _selectable.children("li").eq(i).addClass("ui-selected");
      }
     }
      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){ //Non è stato premuto Ctrl o Shift
     _selectable.children("li").removeClass("ui-selected");
     $(this).addClass("ui-selected");
    }
   });
　　　　　　　　//Chiamata all'evento trascinamento e riorganizzazione del modo di gestione
   $("#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).testo($("#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").rimuoviClasse("ui-selected");
    }
   });
   $("#mydrag .sample-group>ol").droppable({
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
     //Questo viene eseguito due volte se trascinato e rilasciato nella griglia di ordinamento, metti questo contenuto nel metodo stop dell'ordinamento
    }
   });
　　　　　　　　//Esegui l'operazione di rilascio effettiva dopo aver completato l'ordinamento
   $( "#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>");
         .aggiungiClasse("ui-state-highlight ui-sortable-handle").testo($("#mydrag .selectable>li").eq(selected_li_arr[i]).testo());
       //Permette di etichettare l'elemento come da caricare
       $("#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>

Il codice è utilizzabile (non è stato scritto l'effetto di liberazione del singolo scelta, l'esempio è un prototipo attuale, che deve essere modificato in modo plug-in in futuro). Registriamo le esperienze degli ultimi due giorni. Principalmente, la ricerca del meccanismo degli eventi, l'organizzazione delle idee e la gestione delle conflitti ha richiesto un certo sforzo, che dobbiamo annotare.

Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e ti prego di sostenere e urlare la guida.

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il copyright è di proprietà del rispettivo autore, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato sottoposto a modifica manuale e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, invia un'email a notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.