创建良好的拖放功能

Question

我有 2 个带边框的 space 用于工具和免费 space（可放置区域）。这个工具-space 包括一些可以拖动的形状，也可以自由放置-space。但是有点bug...

当图形下降到free-space时，会发生一些滑动事件。首先，拖放任何图形后都会发生，然后如果我们拖动拖放的图形，它们会相互影响，并有一定的滑动。

如果您运行在您的计算机上编写以下代码并尝试此掉落事件，您就会明白我的问题。

非常感谢任何帮助，谢谢！

$(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">&times;</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">&times;</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">&times;</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">&times;</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>

Answer 1

主要问题在于，当项目被丢弃时，Draggable 已将 top 和 left CSS 值分配给项目。我怀疑其他一些 CSS 导致它根据 free-space.

内的某个相对位置起作用

您可以考虑使用 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">&times;</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">&times;</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">&times;</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">&times;</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>

查看更多：https://jqueryui.com/position/

创建良好的拖放功能

Create a good drop&drag function

html

javascript

css

jquery

jquery-ui