我们怎样才能放下我们在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

在将.position()附加到<div>之后，您需要使用$(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>

[(0, 1), (2, 3), (4, 5), (6, 7)]
[(0, 1), (2, 3), (4, 6), (5, 7)]
[(0, 1), (2, 3), (4, 7), (5, 6)]
...
[(0, 2), (1, 3), (4, 5), (6, 7)]
[(0, 2), (1, 3), (4, 6), (5, 7)]
[(0, 2), (1, 3), (4, 7), (5, 6)]

希望有所帮助！