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

  1. Местоположение
  2. Главная страница
  3. Опытные записи
  4. Текст

Реализация операции перетаскивания нескольких выбранных элементов с помощью Jquery UI

Проект требует реализации операции перетаскивания и выпуска, которая позволяет перетаскивать выбранные несколько элементов, а после их выпуска в целевой контейнер, можно сортировать. Послеthought, решил, что jquery-ui подходит лучше всего, так как он предоставляет необходимые для проекта механизмы событий взаимодействия. Перетаскивание, выпуск, сортировка, выбор и т.д. В реальной операции встретилось много проблем, кратко расскажу, в конце приложу效果图 и код.

1. Используется фреймворк bootstrap, после добавления jquery-ui и добавления метода перетаскивания к элементам, появляется сообщение, что этот метод не является функцией. Поиск причины показал, что conflict между bootstrap и jquery-ui в контроле идентификатора $. Перед js, добавленным jquery-ui, добавьте следующую команду для решения проблемы

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

2. jquery-ui предоставляет операции выбора (одиночный выбор, выбор нескольких), при этом выбор нескольких можно выполнить, удерживая Ctrl и单击 левой кнопкой мыши на нескольких элементах. При добавлении операций выбора и перетаскивания к одному и тому же элементу возникли проблемы.

a: Операции выбора, которые можно выполнять с помощью перетаскивания элементов, вступают в конфликт с собственными событиями перетаскивания (лично я считаю, что эффект выбора с помощью Shift +单击 левой кнопкой мыши не так удобен, как использование Ctrl +单击 левой кнопкой мыши).

b: jquery-ui не позволяет одновременно перетаскивать несколько отдельных элементов.

Не знаю, не понял ли я, что jquery-ui можно использовать встроенные методы и свойства, которые поддерживают операции выбора и перетаскивания элементов. Если кто-то знает, пожалуйста, дайте знать. Спасибо!

В общем, были опробованы различные свойства и события jquery-ui, также пытался удалить операцию перетаскивания многоselect из jquery-ui, но не обнаружил необходимый эффект. Поэтому, послеthought, решил не использовать выбор операций jquery-ui. Написать самую операцию выбора. Как и в нашей повседневной системе триггирования событий. (单击 левой кнопкой мыши для выбора одного, Ctrl +单击 левой кнопкой мыши для выбора нескольких, Shift +单击 левой кнопкой мыши для выбора нескольких), а затем использовать механизмы событий drag и drop и sort из jquery-ui для реализации эффекта сортировки перетаскивания.

Еще один момент, эффект перетаскивания нескольких элементов на самом деле является перетаскиванием одного заданного элемента DOM, все элементы, которые нужно перетаскивать, можно поместить в этот элемент. Это требует использования функции helper в drag jQuery-ui, которая возвращает новый набор элементов для перетаскивания. (О событиях и атрибутах jQuery-ui можно узнать из Интернета. Но это не слишком подробно, и вам нужно будет самому экспериментировать).

Okay, разместите простые效果图 и код

Рисунок 1 (эффект во время перетаскивания)

Рисунок 2 (эффект после отпуска)

Эффекты как на рисунке, левая оранжевая часть - выбранные узлы, красная эллиптическая область - эффект перетаскивания мыши, 3 - количество выбранных элементов; правая желтая область - контейнер, в котором можно отпустить и упорядочить. При перетаскивании в этой области узлы автоматически упорядочиваются по положению мыши, как на рисунке, если отпустить мышь, три узла слева переместятся в желтую область.

Конечно, вышеупомянутые эффекты требуют重新 присвоения новым элементам целей для перетаскивания, а также监听 событий перетаскивания и освобождения, написания пользовательских логик. Разместите свой код, некоторые события и атрибуты можно найти в документации 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{ 背景: #FECA40; }
  .selectable .ui-selected{ 背景: #F39814; 颜色: 白色; }
  .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){ //не нажата клавиша 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){ // Only press the Ctrl key
     $(this).addClass("ui-selected");
     selected_begin_index=_selectable.children("li").index(this);
    }else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ // Only press the Shift key or both Ctrl and Shift keys are pressed
     _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){ //не нажата клавиша Ctrl или Shift
     _selectable.children("li").removeClass("ui-selected");
     $(this).addClass("ui-selected");
    }
   });
　　　　　　　　//вызов события перетаскивания и перерасчет обработок
   $("#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" />'));
     возврат drag_info_box;
    ,
    start: function( event, ui ) {
     var _drag_ele=ui.helper;
     _drag_ele.children("span").eq(0).текст($("#mydrag .selectable>li.ui-selected").длина());
     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).значение(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.имеетКласс("drag_info_box")){
      var selected_li_arr=ui.item.children("input").eq(0).значение().разделить(',');
      for(var i=0;i<selected_li_arr.length;i++){
       var _group_li_=$("<li></li>");
         .добавить("ui-state-highlight ui-sortable-handle").текст($("#mydrag .selectable>li").eq(selected_li_arr[i]).текст());
       //Для этого элемента установите метку загрузки
       $("#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">Элемент 1</li>
    <li class="ui-widget-content">Элемент 2</li>
    <li class="ui-widget-content">Элемент 3</li>
    <li class="ui-widget-content">Элемент 4</li>
    <li class="ui-widget-content">Элемент 5</li>
    <li class="ui-widget-content">Элемент 6</li>
    <li class="ui-widget-content">Элемент 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">Элемент 1</li>
      <li class="ui-state-highlight">Элемент 2</li>
      <li class="ui-state-highlight">Элемент 3</li>
      <li class="ui-state-highlight">Элемент 4</li>
      <li class="ui-state-highlight">Элемент 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>

代码可用（没有写单选的释放效果，例子是目前的一个试验品，后续还要改成插件方式）。记录一下这两天的心得。主要是查找事件机制，整理思路和处理冲突问题花费了一定精力，得记上一笔。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Основной учебник
Вам может понравиться