Code Bug Fix: Jquery Droppable in scrollable div

Original Source Link

I am in need of a bit of help. I am trying to build an esign app. I have most of the app put together but noticed when trying to reduce down the size of the screen to mobile the fields don’t move with the screen size. I then figured out I would need to set the height and width as a percentage to obtain this which I successfully did.

The issue I then came across which I cannot seem to figure out is if I set the container to have a height and to become scrollable, when I drop a field onto the document it just appears anywhere it wants to and not to the absolute position of the size of the document.

I have spent 2 days trying to figure it out but no joy. Any help would be much appreciated. I have tried to replicate the issue in fiddle see link below

<!-- Html -->
  <div class="header">
    <p class="draggable">
  <div class="droppable-container">
    <div class="droppable">


<!-- CSS -->
body {
  font-family: arial;
  background: #ddd

.header {
  background-color: #333;
  padding: 5px;
  color: #fff;

.droppable-container {
  height: 600px;
  overflow: auto;
  position: relative;

.droppable {
  height: 7000px

    helper: 'clone',
  start: function(event, ui) {


<!-- Jquery -->
    drop: function(event, ui) {
    var t =;
    var l = ui.position.left;
    var tp = (t / parseInt($(this).parent().height()) * 100 + '%');
    var lp = (l / parseInt($(this).parent().width()) * 100 + '%');
    var clone = $(ui.helper).clone();
        clone.css({position: 'absolute', top: tp, left: lp});

Tagged : / /

Leave a Reply

Your email address will not be published. Required fields are marked *