CODEWITHSUNDEEP
angularjs
Alyssa
Alyssa

Reputation: 109

drag and drop feature in AngularJs

I'm trying to use drag and drop feature in my application, I downloaded the drag and drop module which can be found here: https://github.com/a5hik/ng-sortable , I need to use a simple example exactly like this: http://a5hik.github.io/ng-sortable/#/kanban I don't know how to use it, If I need to download another thing. Thanks in advance for your help

Upvotes: 2

Views: 996

Answers (2)

Sampath
Sampath

Reputation: 65860

Update : Here is simple working example : Plunker

Just follow the steps which this link mentioend.

Step 1 : Make sure to load the scripts in your html

<script type="text/javascript" src="dist/ng-sortable.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/ng-sortable.min.css">

<!-- OPTIONAL: default style -->
<link rel="stylesheet" type="text/css" href="dist/ng-sortable.style.min.css">

Step 2 : And Inject the sortable module as dependency

angular.module('xyzApp', ['as.sortable', '....']);

Step 3 : Invoke the Directives using below html structure

Html

<ul data-as-sortable="board.dragControlListeners" data-ng-model="items">
   <li data-ng-repeat="item in items" data-as-sortable-item>
      <div data-as-sortable-item-handle></div>
   </li>
</ul>

Step 4 : Define your callbacks in the invoking controller

JS

$scope.dragControlListeners = {
    accept: function (sourceItemHandleScope, destSortableScope) {return boolean}//override to determine drag is allowed or not. default is true.
    itemMoved: function (event) {//Do what you want},
    orderChanged: function(event) {//Do what you want},
    containment: '#board'//optional param.
    clone: true //optional param for clone feature.
    allowDuplicates: false //optional param allows duplicates to be dropped.
};

$scope.dragControlListeners1 = {
        containment: '#board'//optional param.
        allowDuplicates: true //optional param allows duplicates to be dropped.
};

And you can inspect the exact example you have mentioned above by using F12 Key.

enter image description here

enter image description here

Upvotes: 3

Mohsin Muzawar
Mohsin Muzawar

Reputation: 1212

This might be helpful try using this module

http://angular-dragdrop.github.io/angular-dragdrop/

Upvotes: 1

Related Questions