Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
ng-drag-to-reorder
Advanced tools
Lightweight AngularJS drag and drop functionality to reorder lists without any dependencies other than Angular.
Lightweight AngularJS drag and drop functionality to reorder lists without any dependencies other than Angular. Works great with ng-repeats!
$ npm install ng-drag-to-reorder
or
$ bower install ng-drag-to-reorder
angular.module('yourApp', ['ngDragToReorder']);
drag-to-reorder
attribute to your list items and pass it the list.<ul>
<li ng-repeat="avenger in $ctrl.avengers" drag-to-reorder="$ctrl.avengers">
<span ng-bind="avenger.rank"></span>
<span ng-bind="avenger.name"></span>
</li>
</ul>
dragToReorder_drop
event is broadcasted and will contain the relevant data, allowing your controllers to know when the list has been reordered and react to the changes.$scope.$on('dragToReorder_drop', function (evt, data) {
// The dragged item
data.item
// The new index number for the dragged item
data.newIndex
// The previous index number for the dragged item
data.prevIndex
// The list after it has been reordered
data.list
});
When you start dragging the element, different classes are added to the element being dragged as well as the elements you are dragging over.
(All classes are added to the elements containing the drag-to-reorder
attribute)
dtr-dragging
is added to the element that is being dragged when you start to drag it.dtr-over
is added to the element you are hovering over.dtr-dropping-above
is added to the element if you are hovering above the the middle point of the element. ***dtr-dropping-below
is added to the element if you are hovering below the the middle point of the element. ***dtr-transition
is added to the dragged element when you start to drag it, but is removed on a delay after being dropped.
This default delay is 1 second (1000 ms), but can be designated by using the dtr-transition-timeout
attribute (see Options below).*** Important: The class dtr-dropping-above
or dtr-dropping-below
will also be added to the previous or next sibling element of the one you are hovering over.
Depending on which class the element you are hovering over has will determine which sibling will have a class added. (See example below...)
E.g. If you have Elements 1-10. And you begin dragging Element 1. Element 1 will have the dtr-dragging
and dtr-transition
classes added to it.
Let's say you drag Element 1 and are hovering over Element 5. Element 5 will have the dtr-over
class and either the dtr-dropping-above
class if the mouse is above the
halfway point (offsetY) or dtr-dropping-below
if below it. If above it, the previous sibling above (Element 4) will have the dtr-dropping-below
class added to it.
If below the halfway point, the next sibling below (Element 6) will have the dtr-dropping-above
class added to it.
After you drop Element 1, the dtr-dragging
class is removed immediately, followed by the dtr-transition
class one second later or after the number of milliseconds passed
in via the dtr-transition-timeout
attribute (see Options below). This allows for more flexibility in how you want to style the elements during the drag and drop process.
dtr-init
allows you turn the drag and drop functionality on and off. You can pass it an expression to observe and will add or remove the event listeners based on a true/false value.<!-- In your template (example) -->
<ul>
<li ng-repeat="avenger in $ctrl.avengers"
drag-to-reorder="$ctrl.avengers"
dtr-init="{{$ctrl.draggable}}">
<span ng-bind="avenger.rank"></span>
<span ng-bind="avenger.name"></span>
</li>
</ul>
<button ng-click="$ctrl.toggleDrag()">Toggle Drag and Drop</button>
// In your controller (example)
//prevent the list from being draggable on load
this.draggable = false;
//toggle drag and drop
this.toggleDrag = () => this.draggable = !this.draggable;
dtr-transition-timeout
allows you to set the timeout period (in milliseconds) for when the dtr-transition
class is removed from the dragged element.
This is just an available option in case you want to add some custom animation.<!-- In your template (example) -->
<ul>
<li ng-repeat="avenger in $ctrl.avengers"
drag-to-reorder="$ctrl.avengers"
dtr-transition-timeout="5000">
<span ng-bind="avenger.rank"></span>
<span ng-bind="avenger.name"></span>
</li>
</ul>
drag-to-reorder
directive uses this service to prevent itself from wiring up event listeners if the browser doesn't support
it. You can use the same service if you want to show or hide any buttons or other UI based on browser support.<!-- In your template (example) -->
<ul>
<li ng-repeat="avenger in $ctrl.avengers"
drag-to-reorder="$ctrl.avengers"
dtr-init="{{$ctrl.draggable}}">
<span ng-bind="avenger.rank"></span>
<span ng-bind="avenger.name"></span>
</li>
</ul>
<button ng-if="$ctrl.isSupported" ng-click="$ctrl.toggleDrag()">Toggle Drag and Drop</button>
/* @ngInject */
function exampleComponentController(ngDragToReorder, $scope) {
//check to see if the browser supports drag and drop
this.isSupported = ngDragToReorder.isSupported();
//prevent the list from being draggable on load
this.draggable = false;
//toggle drag and drop
this.toggleDrag = () => this.draggable = !this.draggable;
}
FAQs
Lightweight AngularJS drag and drop functionality to reorder lists without any dependencies other than Angular.
The npm package ng-drag-to-reorder receives a total of 133 weekly downloads. As such, ng-drag-to-reorder popularity was classified as not popular.
We found that ng-drag-to-reorder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.