Hi all,

 

I have a draggable objects and one droppable object. Droppable object may contain list of items in it, contained in a DIV. Now, the problem is when there are lots of items in droppable box then scrollbar appears. Now, when a draggable clone goes over to this droppables then DIV doesn't scroll.

 

I had already used scroll:true property of Draggable UI but this only scrolls the main window (ie, browser's scrollbar) but not my droppable DIV.

 

Below is the sample code :

$(".lidocument").draggable({
  containment: 'body',
  opacity: 1,
  cursorAt: { right: -20, bottom: -2 },
  revert: 'invalid',
  zIndex: 10000,
  scroll: true,
  handle: "[move='1']",
  addClasses: true,
  helper : 'clone',
  zIndex: 999999,
  cursor: 'move',
  start: function(event, ui) {
    $("#divDropBox").show();
  },
  stop: function(event, ui) { $("#divDropBox").hide(); }
});

$(".drophere").droppable({
    tolerance: 'pointer',
    addClasses: true,
    drop:
 function(e, ui) {
   var dragId = _SelectedIDs;
   var dropId = $(this).attr('id');
   itemDropped(dragId, dropId);
 },
    over: function(event, ui) { this.className = "dropBoxActive"; },
    out: function(event, ui) { this.className = "dropBox"; }
  });

 

 

Can anyone please suggest?

 

Thanks in advance.