悬停占位符问题内带有可放置项目的可排序列表答案

【问题标题】：Sortable list with droppable item inside hover placeholder issue悬停占位符问题内带有可放置项目的可排序列表
【发布时间】：2017-12-22 07:00:06
【问题描述】：

我有一个可排序的列表，里面有一个可放置的项目，也需要排序。当您拖动放置项目旁边的项目时，占位符显示的位置，放置项目在占位符上仍然处于活动状态。

这里有一个简单的 Fiddle：JSFiddle

    $("#item-list").sortable();

$(".container").droppable({
    accept: ".item",
    drop: function (e, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(this).append(dropped.clone().removeAttr('style').removeClass("item").addClass("item-container"));
        dropped.remove();
    }
});

是否已经有解决方案？

【问题讨论】：

标签： jquery hover jquery-ui-sortable placeholder droppable

【解决方案1】：

如果您不希望 item container 类可排序，请使用 cancel

$("#item-list").sortable({
  cancel: ".item.container"
});

【讨论】：

【解决方案2】：

这里有解决方案http://jsfiddle.net/bRbyW/110/

$("#item-list").sortable();

$(".container").droppable({
    accept: ".item",
    beforeStop: function(event, ui) {
        $(this).html();
    },
    drop: function (e, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        if($(droppedOn)[0].innerHTML.indexOf('<div') < 0)
	        $(droppedOn)[0].innerHTML = '';
  $(this).append(dropped.clone().removeAttr('style').removeClass("item").addClass("item-container"));
        
        dropped.remove();
    }
});

.item {
    width:200px;
    height:30px;
    border:1px dashed red;
    margin:10px 0;
    cursor:move;
}
.container {
    height:150px;
    border:1px dashed black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="item-list">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item container">dropbox but still sortable</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

【讨论】：

谢谢 Shiladitya，我感觉你快到了，但是如果我只是在保管箱中进行分类，它们仍然会被丢弃

【解决方案3】：

哇，我正在回答我自己的问题！

解决方案是，将其放入可排序的选项列表中：

refreshPositions: true

这就像一个魅力！

谢谢大家！

【讨论】：