我们如何放置在我们在 droppable div 中释放项目的确切位置元素上

Question

我正在研究拖放功能，它运行良好，但是当我放下元素时，它不会在我释放它的同一位置释放，我知道我遗漏了一些东西，我在这里添加了我的所有代码, 任何人都可以帮助我，在这里我添加了我所有的代码，只需要很少的帮助就可以让它工作谢谢

<script>

            $(".draggable_image").draggable({
                helper: 'clone',
            });
$(".droppable").droppable({
                accept: ".draggable_image",
                drag: function(){
                    var offset = $(this).offset();
                    var xPos = offset.left;
                    var yPos = offset.top;
                },
                drop: function (event, ui) {
                    if (!ui.draggable.hasClass("dropped")) {
                        var uniqueId = new Date().getTime();
                        $(".center-div").append($(ui.draggable).clone().addClass("dropped").attr('id',uniqueId).draggable());
                        $(".dropped img").resizable({ghost: true});
                        ui.draggable.draggable('enable');
                    }
                }
            });
</script>

  

<style>
.center-div {
    width: 80%;
    height: 80%;  
    background: grey;
    position: absolute;
    top:240px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.line{
    height: 47px;
    border-bottom: 1px solid black;
    position: absolute;
}
.line-complete:hover {
    //border: 1px solid white !important;
    //background: white !important;
    //padding: 0px;
    //font-size: 1.2em;
    cursor: pointer;
}
.line-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 50px;
    color: #fff;
    line-height: 5px;
    text-align: center;
    background: grey; //red
    margin-left: -3px !important;
    margin-top: -5px !important;
    z-index: 9999;
}


.draggable { padding: 0.5em; float: left; margin: 10px 10px 10px; }
.draggeble_exist { padding: 0.5em; float: left; margin: 10px 10px 10px; }


.button {
    font-size: 6px !important;
}

 

</style>

<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>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<div class="container">
<div class="row">
  <div class="col-md-12">
  <div id="floorplan_images">
  <img class="draggable_image" src="http://hfpbuilder-dev.serverdatahost.com/images/vessel_drum.png" width="50" height="50">
  </div>
</div>
</div>
</div>  
<div class="center-div ui-widget-header droppable">
     
 </div>

Answer 1

在附加到 <div> 后，您需要使用 .position() 来设置它的位置。

例如：

$(function() {
  $(".draggable_image").draggable({
    helper: 'clone',
    zIndex: 1000
  });
  $(".droppable").droppable({
    accept: ".draggable_image",
    drag: function() {
      var offset = $(this).offset();
      var xPos = offset.left;
      var yPos = offset.top;
    },
    drop: function(event, ui) {
      var item = ui.draggable;
      if (!item.hasClass("dropped")) {
        var uniqueId = new Date().getTime();
        var newItem = item.clone();
        newItem.addClass("dropped");
        newItem.attr("id", uniqueId);
        newItem.appendTo($(this))
          .draggable({
            handle: $(this).not(".ui-resizable-handle"),
            containment: $(".droppable")
          });
        newItem.position({ of: event
        });
        newItem.resizable({
          ghost: true
        });
      } else {
        return true;
      }
    }
  });
});

.center-div {
  width: 80%;
  height: 80%;
  background: grey;
  position: absolute;
  top: 240px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.line {
  height: 47px;
  border-bottom: 1px solid black;
  position: absolute;
}

.line-complete:hover {
  //border: 1px solid white !important;
  //background: white !important;
  //padding: 0px;
  //font-size: 1.2em;
  cursor: pointer;
}

.line-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 5px;
  text-align: center;
  background: grey; //red
  margin-left: -3px !important;
  margin-top: -5px !important;
  z-index: 9999;
}

.draggable {
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px;
}

.draggeble_exist {
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px;
}

.button {
  font-size: 6px !important;
}

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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-md-12">
      <div id="floorplan_images">
        <img class="draggable_image" src="http://hfpbuilder-dev.serverdatahost.com/images/vessel_drum.png" width="50" height="50">
      </div>
    </div>
  </div>
</div>
<div class="center-div ui-widget-header droppable">
</div>

希望对您有所帮助！

我们如何放置在我们在 droppable div 中释放项目的确切位置元素上

How can we drop on exact position element where we release the item in droppable div

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable