On the firewall, the widget is under the mouse while dragging

Question

I really use gridster to drag some elements.

My container is larger than my window, so, as usual, I have a scroll bar on the right. Now, if I want to drag an item from top to bottom, I need to click on it and scroll the mouse at the same time.

As you can see in this script. If you take an object and start scrolling, the position remains in the first place, you need to move the mouse to bring it to it.

Is there a way to keep an item under the mouse even if you scroll?

Sample html code:

<div class="container"> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li> <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li> <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li> <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li> <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li> <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li> <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li> <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li> <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li> </ul> </div> </div> 

Sample css code:

 .container{ height:1600px; } 

JQuery sample code:

  var gridster; $(function(){ gridster = $(".gridster ul").gridster({ widget_base_dimensions: [100, 55], widget_margins: [5, 5], }).data('gridster'); }); 

Answer 1

I assume that it is defined as an algorithm, we want the dragged object, when we scroll, to stay where the mouse is. So we need the onScroll event somewhere.

Usually we just update the position of the object with the mouse, but onScroll does not seem to be attached to it. To paraphrase it, we can say that we want the object to move / shift by n the amount equal to the amount that we scroll. It might work.

Of course, in order to compensate for the object, you need to play a trick on the grid. But I think something like this might work:

 var gridster = $(".gridster ul").gridster({ widget_base_dimensions: [100, 55], widget_margins: [5, 5], draggable: { start: function (e, ui, $widget) { var that = this , //to access gridster from inside onscroll oldScroll = $(document).scrollTop() //to calculate scroll change obj = $(this.helper ? this.$helper : this.$player) //draggable/helper $(document).on("scroll", function () { //calculate scroll change var curr = $(document).scrollTop() var diff = curr-oldScroll oldScroll = curr //add change to stored offset for gridster that.drag_api.el_init_offset.top += diff //show change temporarily because gridster doesn't update obj.css({  'top': parseFloat(obj.css("top")) + diff }); }) }, stop: function (e, ui, $widget) {  $(document).off("scroll") } } }).data('gridster'); 

Example

I think this will be a good starting point. Current reservations, the grid itself is not updated to another mousemove. You may need to poke more.

---

Update

The above code breaks down into drag-and-drop scrolls, since the grid has its own scroll implementation. Looking at the problem, I could not find a way to distinguish between scrolling and normal scrolling (looked at onMouseWheel and DOMMouseScroll , but did not look like it was well supported. Therefore, I believe that a quick fix will disable the scroll offset if it is close to the edge, so add the following values:

 //change stored offset for gridster if not on edge if(!that.edge) that.drag_api.el_init_offset.top += diff 

And we need to check the drag and drop. Therefore, we add a drag and drop handler to the gridster. Sort of:

  drag:function(e,ui,$widget){ //check if edge var pixelFromEdge=100 this.edge= e.clientY< pixelFromEdge || $("html")[0].clientHeight-e.clientY < pixelFromEdge }, 

Demo

Honestly, he feels that this is probably a better and more elegant solution (not completely modifying the plugin, which is likely to be much simpler)