Skip to content

markdturner/angular-multiple-drag

 
 

Repository files navigation

Angular Multiple Drag Module

Simplest way to make your angular items movable

This module uses Angular Multiple Selection Module

Demo

##Installation

###Using npm

npm install angular-multiple-drag

###Using bower

bower install angular-multiple-drag

###From source

Download source from github.com

##Usage

  • Add multiple-selection.min.js and multiple-drag.min.js files to your application
<script type="text/javascript" src="multiple-selection.min.js"></script>
<script type="text/javascript" src="multiple-drag.min.js"></script>
  • Add module to your app angular.module('app', ['multipleDrag'])
  • Add multiple-selection-zone attribute to element where selectable items will be located
  • Add multiple-selection-item attribute to each selectable item
  • Add multiple-drag-item attribute to each selectable item that can move
  • Customize css

##How it works Each draggable item has it`s own angular scope with variables

Name Description
isDraggable true if element can be movable
isDragging true if element now moving

###How to customize

  • Add ng-class to your item
<div multiple-drag-item ng-class="{'dragging': isDragging}"></div>
  • Customizing .dragging in your css
.selected {
    background-color: red !important;
}

About

Simplest way to make your angular items movable

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 54.6%
  • HTML 45.4%