почему отмена выбора не работает для нескольких элементов с возможностью выбора и перетаскивания - PullRequest
Новая
       40

почему отмена выбора не работает для нескольких элементов с возможностью выбора и перетаскивания

4 голосов
/ 07 марта 2020

я хочу, чтобы мои unselection элементов списка работали так же гладко, как .selectable() без .draggable()

Я ожидаю что-то вроде ниже gif с selectable и draggable вместе :

enter image description here

здесь выше код без draggable: 

   $("#selectable").selectable();
  #feedback {
      font-size: 1.4em;
  }
  #selectable .ui-selecting {
      background: #FECA40;
  }
  #selectable .ui-selected {
      background: #F39814;
      color: white;
  }
  #selectable {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60%;
  }
  #selectable li {
      margin: 3px;
      padding: 0.4em;
      font-size: 1.4em;
      height: 18px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<ol id="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>

Вопрос: ниже комбинированный selectable и draggable выбор и Отмена выбора не работает, как указано выше, код только с selectable

Вот что я пытался: 

$(function() {
    $( "#selectable" ).selectable({
           start: function (event, ui) {
                 /* $('.ui-widget-content').draggable('destroy') */;
             },
       stop: function(event,ui){
           $('.ui-widget-content').draggable({
               drag: function(event,ui){
                  console.log('dragging....');
                  $('#multiple_selected_rows').remove();
                  var elem = document.createElement("div");
                  elem.id = "multiple_selected_rows";
                  elem.innerText = $('li.ui-selected').length+" items";
                  document.body.appendChild(elem);
                  
                   $("#multiple_selected_rows").css({ 'top': event.clientY + 10, 'left': event.clientX + 10 });
               }
           });
           $( "#selectable" ).selectable();
       }
    });
    
    $('#droppable').droppable({
        accept: '.ui-widget-content',
        greedy: true,
        drop: function (event, ui) {
           $('#multiple_selected_rows').remove();
        }   
    });
 });
#feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; /*width: 60%;*/ padding:22px; border: solid 1px #0973c7;}
  #selectable li { margin: 8px; padding:10px; border:solid 1px #CCC;}
  .ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; } 

#main-container{
    display: flex;
    justify-content: space-between;
}

div#main-container .demo {
    width: 50%;
    margin-right: 7px;
}

div#main-container #droppable {
    flex: 1;
    border: 1px solid red;
}

#multiple_selected_rows{
   position:absolute;
   width: 90px;
   height:40px;
   background:red;
   color: #fff;
   text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<div id="main-container">
     <div class="demo">
        <ol id="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 id="droppable">
        
    </div>
</div>

Пожалуйста, помогите мне заранее спасибо !!!!!

1 Ответ

4 голосов
/ 10 марта 2020

Примечание: То, как вы перетаскиваете выделение нескольких элементов, а затем сразу же выбираете только один элемент, щелкая по нему (как показано на рисунке), будет невозможно, если вы будете перетаскивать выбранный элемент. предметы в другую коробку. Вы можете перетащить выделение с помощью selectable() или перетащить, т. Е. Переместить выбранные элементы с помощью draggable(), но не обоими.

Ваши методы selectable() и draggable() конкурируют с одним другой для тех же событий мыши. Поэтому вместо того, чтобы настраивать их при загрузке страницы, попробуйте следующее:

В обратном вызове selectable() stop оберните выбранные элементы в div: 

$('.ui-selected').wrapAll('<div id="dragSet"></div>');

Затем вызовите draggable() на #dragSet. Теперь этот вызов будет иметь приоритет над событиями мыши selectable() для выбранных элементов.

В обратном вызове draggable() stop добавьте выбранные элементы к #droppable и удалите их класс .ui-selected. 

$('#droppable').append( $('#dragSet') );
$('#dragSet').contents().unwrap();
$('#droppable li').removeClass('ui-selected');

Наконец, добавьте некоторые logi c к обратному вызову selectable() start, чтобы предотвратить двойную перенос вашего выбора. 

if ( $('#dragSet').children().length > 0 ) $('#dragSet').contents().unwrap();
else $('#dragSet').remove();

См. Рабочий пример ниже: 

$(function() {
  $("#selectable").selectable({
    start: function(event, ui) {
      if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
      else $('#dragSet').remove();
    },
    stop: function(event, ui) {
      $('.ui-selected').wrapAll('<div id="dragSet"></div>');
      $('#dragSet').draggable({
        stop: function(event, ui) {
          $('#droppable').append($('#dragSet'));
          $('#dragSet').contents().unwrap();
          $('#droppable li').removeClass('ui-selected');
        }
      });
    }
  });
});
#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*width: 60%;*/
  padding: 22px;
  border: solid 1px #0973c7;
}

#selectable li {
  margin: 8px;
  padding: 10px;
  border: solid 1px #CCC;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

#main-container {
  display: flex;
  justify-content: space-between;
}

div#main-container .demo {
  width: 50%;
  margin-right: 7px;
}

div#main-container #droppable {
  flex: 1;
  border: 1px solid red;
}

#multiple_selected_rows {
  position: absolute;
  width: 90px;
  height: 40px;
  background: red;
  color: #fff;
  text-align: center;
}

#droppable li.ui-widget-content {
  margin: 8px;
  padding: 10px;
  border: solid 1px #ccc;
  color: white;
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<div id="main-container">
  <div class="demo">
    <ol id="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 id="droppable">

  </div>
</div>

Бонус:

Чтобы перетащить туда-сюда, повторите то же самое JS и поменяйте местами #selectable #droppable. 

$(function() {
  $("#selectable").selectable({
    start: function(event, ui) {
      if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
      else $('#dragSet').remove();
    },
    stop: function(event, ui) {
      $('.ui-selected').wrapAll('<div id="dragSet"></div>');
      $('#dragSet').draggable({
        stop: function(event, ui) {
          $('#droppable').append($('#dragSet'));
          $('#dragSet').contents().unwrap();
          $('#droppable li').removeClass('ui-selected');
        }
      });
    }
  });

  $("#droppable").selectable({
    start: function(event, ui) {
      if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
      else $('#dragSet').remove();
    },
    stop: function(event, ui) {
      $('.ui-selected').wrapAll('<div id="dragSet"></div>');
      $('#dragSet').draggable({
        stop: function(event, ui) {
          $('#selectable').append($('#dragSet'));
          $('#dragSet').contents().unwrap();
          $('#selectable li').removeClass('ui-selected');
        }
      });
    }
  });
});
#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting,
#droppable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected,
#droppable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable,
#droppable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding: 22px;
  border: solid 1px #0973c7;
}

#selectable li,
#droppable li {
  margin: 8px;
  padding: 10px;
  border: solid 1px #CCC;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

#main-container {
  display: flex;
  justify-content: space-between;
}

div#main-container .demo {
  width: 50%;
  margin-right: 7px;
}

div#main-container #droppable {
  flex: 1;
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<div id="main-container">
  <div class="demo">
    <ol id="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 id="droppable">

  </div>
</div>

Выбор и перетаскивание с выделением, как показано на рисунке:

Обычно вам нужно нажать на выбранные элементы, чтобы перетащить их. Но поскольку вы хотите иметь возможность нажимать на них, чтобы сделать новый выбор, вам нужно добавить еще один элемент в качестве маркера, чтобы перетаскивать их. 

$(function() {
  $( "#selectable" ).selectable({      
    start: function (event, ui) {
        if ( $('#dragSet').children().length > 0 ) {
          $('#dragHandle').remove();
          $('#dragSet').contents().unwrap();
        }
        else $('#dragSet').remove();        
    },
    stop: function(event,ui){        
      $('.ui-selected').wrapAll('<div id="dragSet"></div>');
      $('#dragSet').append('<div id="dragHandle">Drag Me</div>');
      $('#dragHandle').on('mouseenter', function() {
        $('#dragSet').draggable({
          stop: function(event, ui){            
            $('#droppable').append( $('#dragSet') );
            $('#dragHandle').remove();
            $('#dragSet').contents().unwrap();
            $('#droppable li').removeClass('ui-selected');          
          }
        });
      }).on('mouseleave', function() {
        $('#dragSet').draggable('destroy');
      }); 
    }
  });

  $( "#droppable" ).selectable({      
    start: function (event, ui) {
        if ( $('#dragSet').children().length > 0 ) {
          $('#dragHandle').remove();
          $('#dragSet').contents().unwrap();          
        }
        else $('#dragSet').remove();        
    },
    stop: function(event,ui){        
      $('.ui-selected').wrapAll('<div id="dragSet"></div>');
      $('#dragSet').append('<div id="dragHandle">Drag Me</div>');
      $('#dragHandle').on('mouseenter', function() {
        $('#dragSet').draggable({
          stop: function(event, ui){            
            $('#selectable').append( $('#dragSet') );
            $('#dragHandle').remove();
            $('#dragSet').contents().unwrap();
            $('#selectable li').removeClass('ui-selected');          
          }
        });
      }).on('mouseleave', function() {
        $('#dragSet').draggable('destroy');
      });
    }
  });
 });
#feedback { 
  font-size: 1.4em; 
}

#selectable .ui-selecting,
#droppable .ui-selecting { 
  background: #FECA40; 
}

#selectable .ui-selected,
#droppable .ui-selected { 
  background: #F39814; 
  color: white; 
}

#selectable, 
#droppable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  padding:22px; 
  border: solid 1px #0973c7;
}

#selectable li,
#droppable li { 
  margin: 8px; 
  padding:10px; 
  border:solid 1px #CCC;
}

.ui-selectable-helper { 
  position: absolute; 
  z-index: 100; 
  border:1px dotted black; 
} 

#main-container{
  display: flex;
  justify-content: space-between;
}

div#main-container .demo {
  width: 50%;
  margin-right: 7px;
}

div#main-container #droppable {
  flex: 1;
  border: 1px solid red;
}

#dragSet {
  position: relative;
}

#dragHandle {
  position: absolute;
  top: 4px;
  right: 12px;
  background-color: red;
  color: white;
  padding: 6px;
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<div id="main-container">
  <div class="demo">
    <ol id="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 id="droppable">

  </div>
</div>
...