創建好拖放 function
[英]Create a good drop&drag function
問題描述
我有 2 個用於工具的邊界空間和可用空間（可放置區域）。 這個工具空間包括一些可以拖動的形狀，也可以拖放到自由空間。 但是有個小bug...
當圖形下降到自由空間時，會發生一些幻燈片事件。 首先，它發生在丟棄任何圖形之后，然后如果我們拖動丟棄的圖形，它們會以一定的幻燈片相互影響。
如果您在計算機上運行以下代碼並嘗試此丟棄事件，您將理解我的問題。
任何幫助將不勝感激，謝謝！
$(function() { $( ".draggable-item" ).draggable({ revert: "invalid" }); $(".droppable-area").droppable({ drop: function(event, ui) { $(this).append(ui.draggable); } }); } );
.tool-space{ border: 10px double #005580; min-height: 608px; }.free-space{ border: 10px solid #005580; min-height: 608px; }.doitcenter{ text-align: center; }.close-button{ font-size: 24px; cursor: pointer; }.shapes{ opacity: 0.8; margin-bottom: 10px; }.shapes:hover{ cursor: move; opacity: 1; }
<,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title>jQuery UI Draggable - Default functionality</title> <script src="https.//kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui:css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-1.12.4:js"></script> <script src="https.//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-2"> <div class="tool-space"> <div class="ui-widget-content doitcenter mt-2"> <span class="draggable-item"> <span onclick="this.parentNode.style;display = 'none';" class="close-button">×.</span> <i class="far fa-square fa-2x shapes"></i> </span> </div> <div class="ui-widget-content doitcenter mt-2"> <span class="draggable-item"> <span onclick="this.parentNode.style;display = 'none';" class="close-button">×.</span> <i class="far fa-circle fa-2x shapes"></i> </span> </div> <div class="ui-widget-content doitcenter mt-2"> <span class="draggable-item"> <span onclick="this.parentNode.style;display = 'none';" class="close-button">×.</span> <i class="far fa-square fa-2x shapes"></i> </span> </div> <div class="ui-widget-content doitcenter mt-2"> <span class="draggable-item"> <span onclick="this.parentNode.style;display = 'none';" class="close-button">×</span> <i class="far fa-circle fa-2x shapes"></i> </span> </div> </div> </div> <div class="col-10"> <div class="free-space droppable-area"> </div> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2020-07-27 22:56:51
主要問題在於，當項目被丟棄時，Draggable 已將top和left CSS 值分配給該項目。 我懷疑其他一些 CSS 導致它基於free-space內的一些相對 position 工作。
您可以考慮使用 UI .position()來糾正這個問題。
$(function() { $(".doitcenter").draggable({ revert: "invalid", handle: ".shapes" }); $(".droppable-area").droppable({ drop: function(event, ui) { ui.draggable.appendTo(this).position({ my: "center center-5", at: "center", of: event }); } }); $(".free-space").on("click", ".close-button", function(e) { $(this).closest(".doitcenter").remove(); }); });
.tool-space { border: 10px double #005580; min-height: 608px; }.free-space { border: 10px solid #005580; min-height: 608px; }.free-space.doitcenter { width: 40px; }.doitcenter { text-align: center; }.close-button { font-size: 24px; cursor: pointer; }.shapes { opacity: 0.8; margin-bottom: 10px; }.shapes:hover { cursor: move; opacity: 1; }
<script src="https://kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container"> <div class="row"> <div class="col-2"> <div class="tool-space"> <div class="ui-widget-content doitcenter mt-2"> <span class="draggable-item"><span class="close-button">×</span><i class="far fa-square fa-2x shapes"></i></span> </div> <div class="ui-widget-content doitcenter mt-2"> <span class="draggable-item"><span class="close-button">×</span><i class="far fa-circle fa-2x shapes"></i></span> </div> <div class="ui-widget-content doitcenter mt-2"> <span class="draggable-item"><span class="close-button">×</span><i class="far fa-square fa-2x shapes"></i></span> </div> <div class="ui-widget-content doitcenter mt-2"> <span class="draggable-item"><span class="close-button">×</span><i class="far fa-circle fa-2x shapes"></i></span> </div> </div> </div> <div class="col-10"> <div class="free-space droppable-area"> </div> </div> </div> </div>
jquery-ui：使用可堆疊項目刪除和拖動庫存
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.