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

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>

1 answer

  • answered 2018-04-17 05:55 Twisty

    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!