English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Localização atual
  2. Página inicial
  3. Notas de experiência
  4. Texto principal

Implementação de operação de arrastar e soltar múltiplos elementos selecionados com Jquery UI

O projeto precisa de uma operação de arrastar e soltar, que deve permitir que múltiplos elementos selecionados sejam arrastados a cada vez, e após soltarem no recipiente de destino, possam ser organizados. Após pensar um pouco, achei que o jQuery-é apropriado, pois ele fornece o mecanismo de evento de interação necessário para o projeto. Arrastar e soltar, organizar, selecionar e outros efeitos. No entanto, na operação real, encontrei muitos problemas, explico, e finalmente, coloco o gráfico e o código.

1.O framework Bootstrap que estou usando, introduzindo jQuery-Após adicionar o método de arrastar e soltar ao elemento, uma mensagem de erro indica que o método não é uma função. Ao procurar a razão, descobri que o Bootstrap e o jQuery-A interface do usuário $ conflito de controle de identificação. Após introduzir o jQuery-Adicione a seguinte instrução antes do js da interface do usuário

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

2.jQuery-A interface do usuário fornece operações de seleção (seleção única, seleção múltipla), onde a seleção múltipla pode ser feita clicando em múltiplos elementos com o Ctrl pressionado ou arrastando com o mouse em múltiplos elementos para fazer a seleção múltipla. Quando adicionamos operações de seleção e arrastar e soltar ao mesmo elemento, surge um problema.

a: a operação de seleção múltipla pode conflitar com o evento de arrastar e soltar próprio devido ao arrastar e soltar em elementos (achei que o efeito de seleção múltipla arrastando e soltando o mouse não é tão bom quanto usar Shift e clicar com o mouse).

b: jQuery-A interface do usuário não encontrou um jeito de arrastar e soltar múltiplos elementos individuais ao mesmo tempo.

Não sei se sou burro e não descobri o jQuery-A interface do usuário pode usar métodos e propriedades próprios, suportando tanto a seleção múltipla quanto a operação de arrastar e selecionar elementos. Se algum leitor souber, por favor, avise.3Q！

Em resumo, testei vários jQuery-propriedades e eventos da interface do usuário, tentei usar jQuery-não encontrei o efeito que preciso na operação de arrastar e seleção múltipla da interface do usuário. Portanto, após pensar um pouco, decidi não usar jQuery-operação de seleção da interface do usuário. Escreva uma operação de seleção. Assim como o mecanismo de trigger de evento que usamos no dia-a-dia. (Clique no único elemento, Ctrl+Seleção múltipla do mouse, 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étodo de seleção múltipla personalizado
   var selected_begin_index,selected_end_index;
   $("#mydrag").on("mousedown",".selectable>li",function(e){
    var _selectable= $(this).parent();
    if(!e.ctrlKey && !e.shiftKey){ //Não foi pressionado Ctrl ou Shift
     if(!$(this).hasClass("ui");-selected")){
      _selectable.children("li").removeClass("ui-selecionado");
     }
     $("#mydrag .selectable>li").addClass("ui-selecionado");
     selected_begin_index=_selectable.children("li").index(this);
    }else if(e.ctrlKey && !e.shiftKey){ //Apenas pressione a tecla Ctrl
     $("#mydrag .selectable>li").addClass("ui-selecionado");
     selected_begin_index=_selectable.children("li").index(this);
    }else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ //Apenas pressione a tecla Shift ou pressione as teclas Ctrl e Shift ao mesmo tempo
     _selectable.children("li").removeClass("ui-selecionado");
     $("#mydrag .selectable>li").addClass("ui-selecionado");
     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");-selecionado");
      }
     }else{
      for(var i=selected_end_index;i<=selected_begin_index;i++){
       _selectable.children("li").eq(i).addClass("ui");-selecionado");
      }
     }
    }
   }).on("mouseup",".selectable>li",function(e){
    var _selectable= $(this).parent();
    if(!e.ctrlKey && !e.shiftKey){ //Não foi pressionado Ctrl ou Shift
     _selectable.children("li").removeClass("ui-selecionado");
     $("#mydrag .selectable>li").addClass("ui-selecionado");
    }
   });
　　　　　　　　//Chamar evento de arrastar e replanejar maneiras de tratamento
   $("#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-selecionado");
    }
   });
   $("#mydrag .sample-group>ol").droppable({
    activeClass: "ui-state-realçar",
    drop: function( event, ui ) {
     //Este conteúdo será executado duas vezes se arrastado para o painel de classificação, coloque o conteúdo dentro do método stop da classificação
    }
   });
　　　　　　　　//Executar a operação de liberação real após a classificação completa
   $("#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-realçar ui-sortable-handle").text($("#mydrag .selectable>li").eq(selected_li_arr[i]).text());
       //Marcar o elemento com a etiqueta de upload
       $("#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>

O código é utilizável (não foi escrito o efeito de liberação de opção única, o exemplo é um protótipo atual, que ainda será modificado para o modo plug-in). Registo de pensamentos dos últimos dois dias. Principalmente, gastou uma quantidade significativa de energia na busca do mecanismo de evento, organização de pensamento e resolução de conflitos, merecendo ser registrado.

Isso é tudo o que há no artigo. Esperamos que isso ajude seus estudos e esperamos que você apoie o Tutorial de Grito.

Declaração: O conteúdo deste artigo é de internet, pertencente ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da internet. Este site não possui direitos autorais, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Aos poucos, o site deletará o conteúdo suspeito de infringência.

Manual básico
Você também pode gostar