SortableJS-无法将项目从可拖动和可排序中排除 [英] SortableJS - can't exclude item from being draggable and sortable

问题描述

我已经在此处提交了问题，但只想检查您是否可以在这里更快地解决这个问题.

I've already submitted an issue here but just wanted to check if you can solve this faster here.

试图将某项排除在可拖动的范围之外，而不是使其不能进行排序-问题是可以在其后放置其他元素.

Trying to exclude an item from being draggable works but not from being sortable -- the problem is that other elements can be placed behind it.

SortableJS文档似乎没有排除对象.

这是使用jQuery UI的预期行为:

Here's the expected behavior using jQuery UI:

//jQuery UI
$("#demo .sortable").sortable({
    items: "li:not(.exclude)",
    cancel: "li.exclude"
});
$("#demo .sortable").disableSelection();

$('.add-new').click(function(){
    $(this).prev().clone().insertBefore(this);
});

h1{ font-size: 1em; margin:1em}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 260px; overflow:auto; }
.sortable li { background:lightgray; text-align:center; float:left; width:50px; height:50px; margin:0.2em; padding: 0.2em; cursor:move; }
.sortable li.add-new{cursor:default; color:#959595; opacity:0.8; background: white; outline:2px dotted gray}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<h1>jQuery UI</h1>
<div id="demo">
    <ul class="sortable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
    </ul>
    
</div><!-- End demo -->

请注意，您永远不能将一个项目放在最后一个添加新项目"之后.这是另一个示例，它使用jQuery UI来区分在可排序目标和放置目标之间进行选择，并且可以将其之一禁用.

Notice that you can never place an item after the last "Add New Item". This is another example using jQuery UI that makes distinction between sortable and drop target and can disable it either one.

到目前为止，我对SortableJS所做的尝试:

What I've tried so far with SortableJS:

// SortableJS

let mySortable = $("#demo2 .sortable").sortable({
  draggable: "li:not(.exclude)",
  animation: 250,
  forceFallback: true,
  removeCloneOnHide: true,
  touchStartThreshold: 10,

  onMove: function(evt) {
    //doesn't work
    //console.log ($(evt.dragged).index(),$('.exclude').index());
    //return $(evt.dragged).is(':last-child') ? false : true; 
  },

  onEnd: function(evt) {
    var itemEl = evt.item; // dragged HTMLElement
    if (!$('.exclude').is(':last-child')) {
      // Somewhat works but is super hacky and visually bad.
      //$('.exclude').appendTo($('.exclude').parent());  
    }
  }
});


$('.add-new').click(function(){
    $(this).prev().clone().insertBefore(this);
});

h1{ font-size: 1em; margin:1em}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 260px; overflow:auto; }
.sortable li { background:lightgray; text-align:center; float:left; width:50px; height:50px; margin:0.2em; padding: 0.2em; cursor:move; }
.sortable li.add-new{cursor:default; color:#959595; opacity:0.8; background: white; outline:2px dotted gray}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>



<h1>SortableJS</h1>
<div id="demo2">
  <ul class="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li draggable="false" droppable="false" class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
  </ul>

</div>
<!-- End demo -->

我不想接受添加新项"在可排序的div或 position:absolute 中知道如何实现吗?

I don't want to take the "Add New Item" out of the sortable div or position:absolute it Any idea how to accomplish this?

谢谢！

推荐答案

如果检查文档，则有一个选项 filter:".ignore-elements" ，您可以使用它忽略您不想拖动的元素.然后，根据返回的true或false取消事件，检查相关的目标元素是否没有 exclude 类.

If you check documentation there is one option filter: ".ignore-elements" you can use this to ignore elements which you do not want to be draggable . Then , check if the related target element doesn't have exclude class depending on this return true or false to cancel event.

演示代码 :

let mySortable = $("#demo2 .sortable").sortable({
  animation: 250,
  forceFallback: true,
  removeCloneOnHide: true,
  touchStartThreshold: 10,
  filter: ".exclude", //use this
  onMove: function(evt) {
    return evt.related.className.indexOf('exclude') === -1; //and this
  }
});


$('.add-new').click(function() {
  $(this).prev().clone().insertBefore(this);
});

h1 {
  font-size: 1em;
  margin: 1em
}

.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 260px;
  overflow: auto;
}

.sortable li {
  background: lightgray;
  text-align: center;
  float: left;
  width: 50px;
  height: 50px;
  margin: 0.2em;
  padding: 0.2em;
  cursor: move;
}

.sortable li.add-new {
  cursor: default;
  color: #959595;
  opacity: 0.8;
  background: white;
  outline: 2px dotted gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>



<h1>SortableJS</h1>
<div id="demo2">
  <ul class="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li draggable="false" droppable="false" class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
  </ul>

</div>

这篇关于SortableJS-无法将项目从可拖动和可排序中排除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！