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

https://jsfiddle.net/billybrad1985/rmsk9dvx/37/

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

    </div>
  </div>
</div>

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

.header {
  width:100%;
  background-color: #333;
  padding: 5px;
  color: #fff;
}

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

.droppable {
  height: 7000px
}

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

  }
});

<!-- Jquery -->
$('.droppable').droppable({
    drop: function(event, ui) {
    var t = ui.position.top;
    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();
    console.log(tp);
        clone.css({position: 'absolute', top: tp, left: lp});
        $(this).append(clone);
  }
});

Tagged : / /

Leave a Reply

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