刪除元素后可排序的jQuery-ui怪異行為

Question

我正在建立一個系統，允許用戶將元素從拖動區拖放到放置區。 一旦刪除，這些元素將被“恢復”到其原始位置。 同樣，用戶可以根據需要對刪除的元素進行排序。

我遇到了第一個問題，我無法克隆拖動的塊，但是在放下塊時可以對其進行排序。 現在，我解決了克隆問題，如果嘗試對元素進行排序，則移動的元素來自拖動區，我不明白為什么。

這是HTML：

<div class="container-fluid">
    <div class="row">
        <div class="card col-3">
            <div class="card-body">
                <div class="card draggable-element" data-target="textarea">
                    <div class="card-body">
                        This is some text within a card body. 1
                    </div>
                </div>
                <div class="card draggable-element" data-target="textfield">
                    <div class="card-body">
                        This is some text within a card body. 2
                    </div>
                </div>
                <div class="card draggable-element" data-target="fileinput">
                    <div class="card-body">
                        This is some text within a card body. 3
                    </div>
                </div>
            </div>
        </div>

        <div class="card col-6 offset-1">
            <div class="card-body dropzone">

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



</div><!-- /.container -->

這是JS：

$(document).ready(function() {
    $('.draggable-element').draggable({
        revert: 'invalid',
        appendTo: '.dropzone',
        helper: 'clone'
    });

    $('.dropzone').droppable({
        drop: function (event, ui) {
            // With the following code, the elements won't get cloned
            var item = $(ui.draggable);
            if(!item.hasClass('copy')) {
                item.clone().addClass('copy');
                item.draggable({
                    revert: 'invalid',
                    stack: ".draggable",
                    helper: 'clone'
                })
            }
            else {
                $(this).append($(ui.helper).clone());
            }
            $(this).append(item);
        }
    })
    .sortable();

});

/*
        drop: function (event, ui) {
            // With the following code, the elements getting sorted are 
            // the div.draggable-element from the div.card.col-3
            $(ui.draggable).clone(true).detach().css({
                position: 'relative',
                top: 'auto',
                left: 'auto'
            }).appendTo(this);
        }
 */

我有一段時間沒有使用jquery-ui了，所以我找不到明顯的東西，我試圖將代碼混合在一起，但最終效果不佳。

先感謝您

Answer 1

好的，這可能不是一個完整的答案（但是標記中有一個奇怪的“卡體”卡持有人，所以我將其重命名為測試。不像問題中所代表的那樣“克隆” ...所以它在我的表中排序例如，但不確定此處是否完全復制/解析了。我更新了“克隆”部分，但不確定是否是您想要的。

 $(document).ready(function() { $('.draggable-element').draggable({ revert: 'invalid', appendTo: '.dropzone', helper: 'clone' }); $('.dropzone').droppable({ drop: function(event, ui) { // With the following code, the elements won't get cloned var item = $(ui.draggable); // hide to not obscure console.log(item.length); if (!item.hasClass('copy')) { var newy = item.clone(false); newy.addClass('copy'); //console.log(newy); newy.draggable({ revert: 'invalid', stack: ".draggable", helper: 'clone' }); } else { $(this).append(item); } $('.dropzone').append(newy); // $(this).append(item); } }) .sortable(); }); 

 .cards, .dropzone { border: solid red 1px; height: 5em; } 

 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="card col-3"> <div class="cards"> <div class="card draggable-element" data-target="textarea"> <div class="card-body"> This is some text within a card body. 1 </div> </div> <div class="card draggable-element" data-target="textfield"> <div class="card-body"> This is some text within a card body. 2 </div> </div> <div class="card draggable-element" data-target="fileinput"> <div class="card-body"> This is some text within a card body. 3 </div> </div> </div> </div> <div class="card col-6 offset-1"> <div class="card-body dropzone"> </div> </div> </div> </div>