CODEWITHSUNDEEP
angularjsscrolldrag-and-drop
AlexD
AlexD

Reputation: 4310

AngularJS drag and drop with automatic scrolling

I have an array of filters. Each filter can be a single filter or an array of filters (not recursive, stops with the first level).

I want to display it in a ribbon and allow dragging a filter on top of another, making that filter be added to the array of the other filter.

Only 3 filters will be able to show at once and you can reach others by scrolling horizontally.

I want to be able to automatically scroll while dragging if reached the right/left edge.

There are plenty of ways to implement drag and drop but I'm afraid I'll be in a ditch when I try to add automatic scrolling to them.

How would you suggest going about this? Where do I start? Is there some library that giving me one of my two needs, the second will be easy to implement?

I've tried illustrating what I mean in a pic. Excuse my none existant PS skills and my poor mspaint skills. Dragging a filter X on filter Y will remove X and create an array in the place of Y consisting of X and Y.

enter image description here

Thanks

Upvotes: 1

Views: 3179

Answers (1)

Shashank Singh
Shashank Singh

Reputation: 553

This may be helpful It is working in my case.If you have better solution please share. I have used ngDraggable for drag and drop and on ng-drag-move event call following function like ng-drag-move="dragContainer($event)"

  $scope.dragContainer=function(ev){
              var scrollPostion=$('#sasha').scrollLeft();
              console.log(scrollPostion);
              if(ev.tx>0)
              {
                $('#sasha').scrollLeft(scrollPostion+1);
              }
              else
              {
                  $('#sasha').scrollLeft(scrollPostion-1);  
              }

              console.log('dragging');
            }

where sasha is div Id on which you want to add scroll bar

Upvotes: 2

Related Questions