CODEWITHSUNDEEP
javascriptjquerydraggablejquery-ui-draggable
Ray
Ray

Reputation: 197

jQuery - draggable position issue after window scroll

I load a dynamically with a schedule grid consisting of droppable (the empty timeslots) and draggables (the planned items). My problem is that when after I scroll down the page, selecting a draggable will not appear at the cursor (or the position it initially was) but moves its position upwards by the same amount I have scrolled down. (see image: mouse cursor is at 15:00, screen shows where the draggable moves to)

I know there was once a bug causing similar behaviour. However I use recent versions of jQuery (2.2.4) and jQuery UI (1.12.1). Also I came across this thread:

jQuery draggable shows helper in wrong place after page scrolled

And I have tried all the hacks to get it positioned right. But to no avail. Even when my console show the right top/left coordinates of the draggable. On my screen it still is in the wrong position.

Also very odd, is that this behaviour does not occur in Mac Chrome v58, but started to show up in v62. (maybe sooner as I have not tested each version in between). Same goes for Firefox previous versions on Mac. Also in Safari 9.1.2 (11601.7.7) it works just fine.

The page is in bootstrap format. The schedule content is loaded inside a div.

<div id="content"></div>

Droppable are appended to the scheduleWeek id's:

  <div class="row">
    <div class="col-xs-6 nopadding">
      <div id="scheduleWeek1" class="col-xs-3 nopadding">
       <!-- TIMESLOTS WEEK #1  -->
      </div>
      <div id="scheduleWeek2" class="col-xs-3 nopadding">
        <!-- TIMESLOTS WEEK #2 -->
      </div>
      <div id="scheduleWeek3" class="col-xs-3 nopadding">
       <!-- TIMESLOTS WEEK #3 -->
      </div>
      <div id="scheduleWeek4" class="col-xs-3 nopadding">
        <!-- TIMESLOTS WEEK #4 -->
      </div>
    </div>

Draggables are appended to the droppables and are activated just with standard jQuery:

$( ".ui-draggable" ).draggable({
  snap: ".droppable",
  snapMode: "inner",
  opacity: .4,
  cursor:'move'
});

.ui-draggable 
{ 
  width: 100%; 
  height: 30px;
  padding: 0;
  position:absolute;
  margin: 0;
  z-index:2;
  border: 1px solid;
}
.droppable { 
  width: 100%; 
  height: 30px; 
  padding: 0px; 
  float: left; 
  margin: 0px;
  border-top: 1px dashed;
  border-left: 1px dashed;
  border-top: 1px dashed;
  background:#FFF; 
 });

IMG WRONG POSITION WHEN DRAGGED WHEN WINDOW IS SCROLLED, CURSORS IS AT 15:00

Upvotes: 0

Views: 716

Answers (1)

Ray
Ray

Reputation: 197

I decided to give it one more try and figured that maybe if the draggables are appended to an element outside the dynamic content div, maybe jQuery recognize the window scroll properly. This seems to work, so now after appending the draggables need to be repositioned, but that's not a problem. Maybe it helps someone.

Upvotes: 1

Related Questions