我已经提交了
issue here
但我只是想看看你能不能在这里更快地解决这个问题。
试图将一个项目排除在可拖动的范围之外,但不排除在可排序的范围之外——问题是其他元素可以放在它后面。
SortableJS Docs
似乎没有排除。
以下是使用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 -->
请注意,您永远不能将项目放在最后一个“添加新项目”之后。
This is another example
使用jQuery UI,区分可排序和删除目标,并可以禁用其中任何一个。
到目前为止,我用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{字体大小:1em;边距:1em}
.sortable{列表样式类型:无;边距:0;填充:0;宽度:260px;溢出:auto;}
.sortable li{背景:浅灰色;文本对齐:居中;浮点数:左;宽度:50px;高度:50px,边距:0.2em;填充:0.2em,光标:移动;}
.sortable li.add new{光标:默认值;颜色:#959595;不透明度:0.8;背景:白色;轮廓:2px点灰色}
<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
它
你知道如何做到这一点吗?
谢谢!
