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

Question

I am working on drag and drop functionality it is working good, but when i drop element it is not release at the same position where i released it, i know i am missing something, here i have added my all code, can anyone please help me, here i have added all my code, just little help to make it working thanks

<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

You will want to use .position() to set it's position after it is appended to the <div>.

For example:

$(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>

Hope that helps!