nestable two column height issue

Question

I have implemented Nestable for two columns, drag and drop

http://dbushell.github.io/Nestable/

now the problem is if one column is to long in height and second is small then to drag n drop i have scroll by selecting any element from first column and then drop to second column exact under the last element,

so is there any solution for that?

can check demo here http://dbushell.github.io/Nestable/

here am trying to drop element at the end of right side column but that will dont work untill you put it exact under the last element of right column

Answer 1

i took a look on the plugin source and figured out how to solve this, first add some paddings to the bottom of the list

div.dd {
   padding-bottom: 200px;
}

in the plugin source code change this:

if (this.pointEl.hasClass(opt.handleClass)) {
    this.pointEl = this.pointEl.parent(opt.itemNodeName);
}

to

   if (this.pointEl.hasClass(opt.handleClass)) {
       this.pointEl = this.pointEl.parent(opt.itemNodeName);
  }else {
      var list = this.pointEl.find('> .'+ opt.listClass);
      if(list.length) this.pointEl = list.find('.'+ opt.itemClass +':last');
  }