如何在使用 jquery ui 刪除時對元素進行排序？

Question

我有非常簡單的 jquery ui 代碼來拖放元素。 但是，我有一個問題，我不能在 drop 時對丟棄的元素進行排序！

我使用了 jquery 可排序功能，但我不知道問題出在哪里！

我在這里有完整的代碼示例。 如果我可以用其他方式解釋它，我需要拖放第 1 節，然后拖放第 2 節，最后在第 1 節和第 2 節之間對第 3 節進行排序，同時放下它。 你能幫幫我嗎？

 $(function() { $("#side").resizable({ handles: 'e' }); $("#editor").sortable().disableSelection().droppable({ drop: function(event, ui) { $(this).append('<div contenteditable="true" ' + 'class="alert alert-danger">' + $(ui.draggable).html() + '</div>').animate({ width: "250px" }, 700); } }); $(".item").mousedown(function() { $(this).css('cursor', 'grabbing'); }).draggable({ helper: "clone" }); });

 #container { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } #editor { flex: 1; margin: 0 auto; height: 100vh; background-color: DodgerBlue; text-align: right; padding: 20px; } #side { min-width: 130px; max-width: 260px; height: 100vh; background: #708090; border: 1px solid #696969; color: yellow; }.item { border: 1px solid #DCDCDC; border-radius: .4em; background-color: white; color: #000; padding: 12px; margin: 10px; display: inline-block; }.item:hover { cursor: grab; }

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script> <div id="container"> <div id="side"> <h3 id="title" class="ml-2 mt-2">I'm resizable</h3> <i class="fa fa-align-center item"> Section 1</i> <i class="fa fa-align-center item"> Section 2</i> <i class="fa fa-align-center item"> Section 3</i> <i class="fa fa-align-center item"> Section 4</i> <i class="fa fa-align-center item"> Section 5</i> <i class="fa fa-align-center item"> Section 6</i> </div> <div id="editor" contenteditable="true"> <h3 id="title">I'm editable</h3> <p></p> </div> </div>

Answer 1

為了避免重復，您可以將accept: '.item'選項添加到.droppable選項中。 這樣，只有.item元素可以被刪除，因此只有從側欄拖動的元素才會觸發drop回調。

關於相同的拖動+排序而不丟棄，我不確定是否有可能。 我相信排序機制僅適用於容器中已經存在的項目，但是您拖動一個尚未在容器中的元素。

 $(function() { $("#side").resizable({ handles: 'e' }); $("#editor").sortable().disableSelection().droppable({ accept: '.item', drop: function(event, ui) { $(this).append('<div contenteditable="true" ' + 'class="alert alert-danger">' + $(ui.draggable).html() + '</div>').animate({ width: "250px" }, 700); } }); $(".item").mousedown(function() { $(this).css('cursor', 'grabbing'); }).draggable({ helper: "clone" }); });

 #container { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } #editor { flex: 1; margin: 0 auto; height: 100vh; background-color: DodgerBlue; text-align: right; padding: 20px; } #side { min-width: 130px; max-width: 260px; height: 100vh; background: #708090; border: 1px solid #696969; color: yellow; }.item { border: 1px solid #DCDCDC; border-radius: .4em; background-color: white; color: #000; padding: 12px; margin: 10px; display: inline-block; }.item:hover { cursor: grab; }

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script> <div id="container"> <div id="side"> <h3 id="title" class="ml-2 mt-2">I'm resizable</h3> <i class="fa fa-align-center item"> Section 1</i> <i class="fa fa-align-center item"> Section 2</i> <i class="fa fa-align-center item"> Section 3</i> <i class="fa fa-align-center item"> Section 4</i> <i class="fa fa-align-center item"> Section 5</i> <i class="fa fa-align-center item"> Section 6</i> </div> <div id="editor" contenteditable="true"> <h3 id="title">I'm editable</h3> <p></p> </div> </div>