angular-drag-and-drop-lists
angular-drag-and-drop-lists copied to clipboard
Scroll or Mouse wheel not working using drag and drop
I'm using drag and drop, If i have 100 items in drag and drop list and i want to move 75th no item on 10th location. But Firefox scroll or mouse wheel does not work.
i have the same issue... nvm i found a work around :)
the draggable elements are using the html5 draggable property
all you need to do is add the scroll, look at the solution posted by "user2568570", hope it helps http://stackoverflow.com/questions/18809678/make-html5-draggable-items-scroll-the-page
This is an issue with Firefox. There are other libraries out there that work around the issue.
On Mon, Nov 23, 2015, 7:41 AM Hodor9898 [email protected] wrote:
i have the same issue...
— Reply to this email directly or view it on GitHub https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues/157#issuecomment-158924026 .
The solution of Hodor9898 works, but for usability I want to use the wheel too. The problem is that the wheel event is not triggering while your dragging.
If you are not dragging, you can use the wheel while you have the mouse button clicked and wheel event is triggering.
Tested in Opera and Firefox.
Maybe too late, but my solution was this:
$("footer").bind("dragover", function(e){
$(window).scrollTop($(window).scrollTop()+10);
});
$("#div_nav_header").bind("dragover", function(e){
$(window).scrollTop($(window).scrollTop()-10);
});
replace footer and div_nav_header for whatever you want, but the idea is the same: Force the browser to scroll when you drag over the footer or the header (both can be invisible if you want to).
Tested in Vivaldi, Chrome and IE11.
Regards
Maybe better don't prevent mousewheel event on drag* event? I have div with scrollbar and many divs inside first. They are also with scrollbars. And absent any scroll on drag item make big pain. Because I must move one item to another div which doesn't visible in the viewport.