Drag-and-drop NPM

Drag And Drop

Drag and drop directives for angularJS

ng-dragstart
ng-drag
ng-dragenter
ng-dragleave
ng-dragover
ng-drop
ng-dragend

Instalación con bower

bower install drag-and-drop --save

Instalación con npm

npm install drag-and-drop --save

Ejemplo de uso

Demo

Otro ejemplo

<!--index.html-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="./style.css"/>

        <script src="../bower_components/angular/angular.min.js"></script>
        <script src="../bower_components/drag-and-drop/drag-and-drop.js"></script>
        <script src="./script.js"></script>
    </head>
    <body ng-app="myApp" >
        <div ng-controller="testCtrl">
            <div class="drag" draggable="true" 
                 ng-dragstart="dragstart($event)" 
                 ng-drag="drag($event)"
                 ng-dragenter="dragenter($event)"
                 ng-dragleave="dragleave($event)"
                 ng-dragover="dragover($event)"
                 ng-drop="drop($event)"
                 ng-dragend="dragend($event)"
                 >
                Drag
            </div>
            <div class="dropp" dropzone="true"
                 ng-dragstart="dragstart($event)" 
                 ng-drag="drag($event)"
                 ng-dragenter="dragenter($event)"
                 ng-dragleave="dragleave($event)"
                 ng-dragover="dragover($event)"
                 ng-drop="drop($event)"
                 ng-dragend="dragend($event)"
                 >
                Dropp
            </div>
            <div>{{log}}</div>
        </div>
    </body>
</html>

//script.js
var myAppModule = angular.module('myApp', ['drag-and-drop']);

myAppModule.controller('testCtrl', function ($scope) {
    $scope.log = '---';

    [].forEach.call(
            'dragstart drag dragenter dragleave dragover drop dragend'.split(' '),
            function (eventName) {
                $scope[eventName] = function ($event) {
//                    console.log($event.type, $event.target);
                    console.log($event);
                    $event.target.innerHTML = $event.type + ' '
                            + $event.timeStamp + ' '
                            + $event.offsetX + ',' + $event.offsetY;
                };
            });

});

drag and drop angularjs

angular

@infinitebrahmanuniverse/nolb-drag @everything-registry/sub-chunk-1513

0.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago