Jquery UI 可拖动列表项到框

Question

我有一个我想在页面左侧使用的项目列表，这些项目可以拖到另一侧的框中。我希望这些项目可以拖动到框或被删除。我创建了一个jsfiddle，它允许将项目拖到框中，但这并不是我想要的工作方式。我的问题如下：

1. 当盒子变大时，它会重新排序盒子并将它们放入左列。我希望左侧只包含可拖动的项目。
2. 它会闪烁并且并不总是拖动到光标所在的位置。我在 Mac 上使用 chrome。
3. 我还希望能够从盒子中取出物品。

html:

$(".sortable").sortable({
    revert: true
});
$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "false",
    placeholder: " droppable-placeholder"
});
$("ul, li").disableSelection();

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;

}

li {
    margin: 0.5em;
    padding: 0.5em;
    width: 150px;
    border: 1px solid black;
}

.draggable-column {
  height:100%;
}

.droppable-item {
    border: 1px solid black;
    padding: 5px;
    float: left;
}

.sortable {
    width: 200px;
    min-height: 2em;

}

.droppable-placeholder {
    background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<div class="row">
    <div class="col-xs-4 draggable-column">
        <ul class="">
            <li class="draggable ">1 Drag me onto item</li>
            <li class="draggable ">2 Drag me onto item</li>
            <li class="draggable ">3 Drag me onto item</li>
            <li class="draggable ">4 Drag me onto item</li>
            <li class="draggable ">5 Drag me onto item</li>
        </ul>
    </div>

    <div class="col-xs-8 droppable-column">

        <div class="col-xs-3 droppable-item">
            <h3>
              Item 1
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 2
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 3
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 4
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 5
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 6
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
    </div>

</div>

Answer 1

终于搞定了如何做到这一点，但它不是特别干净：

$(".sortable").sortable({
    revert: true,
    connectWith: ".draggable"
   
});

$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "true",
    placeholder: ".droppable-placeholder",
    
    stop: function(event, ui) {
        console.log("--start of stop");
        var listContainer = $(ui.helper[0].parentElement);
        var newListId = listContainer.attr("id");
        var draggableId = $(this).attr("id");
        var cloneId = newListId + "-" + draggableId;
        console.log("new list id: " + newListId);
        console.log("draggableId: " + draggableId);
        console.log("cloneId: " + cloneId);
        var itemExists = false;
        $("#"+ newListId).find('li').each(function() {
            var sortableItemId = $(this).attr("id");
            console.log("sortable item id " + sortableItemId);
            if (sortableItemId != undefined && sortableItemId == cloneId) {
            	console.log("***  sortable item already exists");
            	itemExists = true;
            } 
        });
        if (itemExists) {
        	$("#" + cloneId).remove();
        }
        $(ui.helper[0]).attr("id", cloneId);
        
        console.log("--end of stop");

    },

});


$("ul, li").disableSelection();
$(".draggable-column, .droppable-column").on("click", ".close-list-item", function(event) {

    event.preventDefault();
    $(this).closest('li').remove();
});

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;
}

li {
    margin: 0.5em;
    padding: 0.5em;
    width: 200px;
    border: 1px solid black;
}

.draggable-column {
    height: 100%;
}

.droppable-item {
    padding: 0.5em;
    float: left;
    align-content: space-between;
}

.droppable-item > h3 {
    text-align: center;
}

.sortable {
    width: 230px;
    height: 10em;
    overflow: auto;
    border: 1px solid black;
    background-color: lightgrey;
}

.droppable-placeholder {
    background-color: yellow;
}

.row {
    display: flex;
    /* equal height of the children*/
}

.col {
    flex: 1;
    /* additionally, equal width */
    padding: 1em;
    border: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="row">
    <div class="col-xs-4 draggable-column">
        <ul class="" id="draggable-column-list">
            <li class="draggable " id="item1">1 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable " id="item2">2 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable " id="item3">3 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable " id="item4">4 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable " id="item5">5 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="col-xs-8 droppable-column">

        <div class="droppable-item">
            <h3>
              Item 1
            </h3>
            <ul class="sortable" id="ul-item1">

            </ul>
        </div>
        <div class="droppable-item">
            <h3 class="">
              Item 2
            </h3>
            <ul class="sortable" id="ul-item2">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 3
            </h3>
            <ul class="sortable" id="ul-item3">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 4
            </h3>
            <ul class="sortable" id="ul-item4">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 5
            </h3>
            <ul class="sortable" id="ul-item5">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 6
            </h3>
            <ul class="sortable" id="ul-item6">

            </ul>
        </div>
    </div>

</div>