为什么取消选择不适用于可选择和可拖动的多个项目

Question

我希望我的unselection 的列表项能像没有.draggable() 的.selectable() 一样流畅地工作

我的期望类似于gif 与selectable 和draggable 的组合：

上面的代码没有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 selection 和 unselection 不能像上面的代码一样工作，只有 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>

请帮助我提前谢谢！！！！！！

Answer 1

注意：如果您要拖动选择的项目到另一个盒子。您可以使用selectable() 拖动选择项，也可以使用draggable() 拖动（即移动）您选择的项目，不能同时使用两者。

---

您的selectable() 和draggable() 方法正在相互竞争相同的鼠标事件。所以不要在页面加载时设置它们，试试这个：

在selectable()stop回调中，将选中的元素包裹在一个div中：

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

然后在#dragSet 上致电draggable()。现在，此调用将优先于所选项目的 selectable() 鼠标事件。

在draggable() stop 回调中，将所选项目附加到#droppable 并删除它们的.ui-selected 类。

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

最后，为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>

---

Selectable and Draggable with selection 如 gif 所示：

通常，您需要单击所选项目才能拖动它们。但是由于您希望能够单击它们以进行新选择，因此您需要添加另一个元素作为手柄来拖动它们。

$(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>