Droppable container not scrolling correctly in JQuery UI

Question

I'm encountering a Problem with JQuery UI. As it can be seen in my snippet, i can drag a elements onto Fields. When I hover over the field the corresponding field is highlighted in green.

Now I added the ability to scroll with the draggable selected. I can scroll up and down when hovering over the bottom or top with the draggable.

The Problem is, that the highlighting does not work correctly after scroll. When hovering over the fields the wrong fields are highlighted, although they are not at that position anymore.

What can I do here?

$(document).ready(function() {
  //alert($('.dragItem').text());
  $('.dragItem').draggable({
    cursor: "-webkit-grabbing",
    helper: 'clone',
    revertDuration: 500,
    revert: true,
    appendTo: 'body',
    opacity: 1.0,
    start: function(event, ui) {},
    stop: function(event, ui) {}
  });

  var left = $('#dropArea');
  var height = left.height() * 2.5;
  $('.upper').droppable({
    over: function(event, ui) {
      left.animate({
        scrollTop: 0
      }, 900, 'linear');
    },
    out: function(event, ui) {
      left.stop();
    }
  });

  $('.lower').droppable({
    over: function(event, ui) {
      value = height;
      left.animate({
        scrollTop: value
      }, 900, 'linear');
      /*$('#tbLeftInner').autoscroll({
       direction: 'down',
       step: 150,
       scroll: true
      });*/
    },
    out: function(event, ui) {
      left.stop();
    }
  });

  $('.dropField').droppable({
    scroll: true,
    accept: '.dragItem',
    drop: function(ev, ui) {
      $(this).removeClass('tbDrop');
      $(this).effect("highlight", {
        color: '#97d700'
      }, 1000);
      $(ui.helper).remove();
      $(ui.draggable).remove();
    },
    over: function(ev, ui) {
      $(this).addClass('tbDrop');
      //$(this).css('background-color', '#97d700 !important');
    },
    out: function(ev, ui) {
      $(this).removeClass('tbDrop');
      //$(this).css('background-color', 'none');
    }
  });
});

#main {
  width: 200px;
  overflow: scroll;
  float:left;
  margin-left: 50px;
}
#dragArea {
  width: 200px;
  margin-bottom: 20px;
  float: left;
}
.dragItem {
  background-color: blue;
  color: white;
  border: green 1px solid;
}
#dropArea {
  width: 200px;
  height: 200px;
  overflow: scroll;
  position: absolute;
}
.dropField {
  background-color: white;
  height: 40px;
  border: green 1px solid;
}
.upper,
.lower {
  position: absolute;
  height: 20px;
  width: 200px;
  background: rgba(50, 50, 50, .2);
  z-index: 10;
}
.lower {
  margin-top: 180px;
}
.tbDrop {
  background-color: #97d700 !important;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="dragArea">
  <div class="dragItem">Drag 1</div>
  <div class="dragItem">Drag 2</div>
  <div class="dragItem">Drag 3</div>
</div>

<div id="main">
  <div class="upper"></div>
  <div class="lower"></div>
  <div id="dropArea">
    <div class="dropField">Field 1</div>
    <div class="dropField">Field 2</div>
    <div class="dropField">Field 3</div>
    <div class="dropField">Field 4</div>
    <div class="dropField">Field 5</div>
    <div class="dropField">Field 6</div>
    <div class="dropField">Field 7</div>
    <div class="dropField">Field 8</div>
  </div>

</div>

I'm also using chrome. It does not work if you never leave the borders of the main conatainer. Try hover over an element first. Then scroll down but stay in the droparea und you will see it highlights the wrong field — Silve2611, Feb 14 '16 at 13:30

score 0 · Accepted Answer · edited May 23 '17 at 12:07

I found solution here. JqueryUI, drag elements into cells of a scrolling dropable div containing large table

In my setup i would had to change the draggable.

$('.dragItem').draggable({
    cursor: "-webkit-grabbing",
    revertDuration: 500,
    revert: true,
    appendTo: 'body',
    opacity: 1.0,
        helper: function(event) {
            var innerHtml = $('.dragitem').html();
            $('#dragArea').append('<div id="clone">'+ innerHtml +'</div>');
            var clone = $("#clone");
            clone.hide();
            setTimeout(function(){
                clone.appendTo('body'); 
                clone.show();
            },1);
            return clone;
        },
    start: function(event, ui) {},
    stop: function(event, ui) {}
});

Droppable container not scrolling correctly in JQuery UI

1 Answers1