Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/not-an-aardvark/angular-sortable-views

Fork of https://github.com/kamilkp/angular-sortable-view
https://github.com/not-an-aardvark/angular-sortable-views

Last synced: about 1 month ago
JSON representation

Fork of https://github.com/kamilkp/angular-sortable-view

Awesome Lists containing this project

README 

        
angular-sortable-views v0.0.15-a

=================



**This is a fork of the [angular-sortable-view](https://github.com/kamilkp/angular-sortable-view) package, with the added ability to dynamically disable dragging on an element.**



```html



  


    
Draggable content


  




```



```bash

npm install angular-sortable-views

```



---



Fully declarative (multi)sortable for AngularJS



Demo: http://kamilkp.github.io/angular-sortable-view/



You can find the source code for this demo on branch "gh-pages".



Also see the changelog [here](https://github.com/kamilkp/angular-sortable-view/blob/master/CHANGELOG.md)



###DESCRIPTION:



This is a simple library written as a module for [AngularJS](https://github.com/angular/angular.js) for sorting elements in the UI. It supports both single elements list, and multiple connected lists, where an element can be moved from one to another.



This library requires ***no dependencies whatsoever*** (except angular.js of course), so ***you no longer need to include jQuery and jQueryUI and angularUI*** which altogether gives the size of around ***340kB minified***. Whereas the [angular-sortable-view](https://github.com/kamilkp/angular-sortable-view) is only ***5kB minified!***.



###API:



The API is declarative. There are four directives (hooked on attributes) that need to be nested properly:



  * `sv-root` - this is where all the logic is happening. If multiple lists should be connected with each other so that elements can be moved between them and they have a common ancestor, put this attribute on that element. If not and you still want the multi-sortable behaviour a value for that attribue must be provided. That value will be used as an identifier to connect those roots together.

    **Optional attributes:**

    * `sv-on-sort` - The expression passed as a value of that attribute will be evaluated when elements order has changed after sorting. Several parameters can be injected there like: `sv-on-sort="foo($item, $partFrom, $partTo, $indexFrom, $indexTo)"` where:

				
    

    					
  • `$item` is the item in model which has been moved
    • 

    					
  • `$partFrom` is the part from which the $item originated
    • 

    					
  • `$partTo` is the part to which the $item has been moved
    • 

    					
  • `$indexFrom` is the previous index of the $item in $partFrom
    • 

    					
  • `$indexTo` is the index of the $item in $partTo
    • 

    				


			

			
  • `sv-on-start` - The expression passed as a value of that attribute will be evaluated when a user starts moving an element. Several parameters can be injected there like: `sv-on-start="bar($item, $part, $index, $helper)"` where:

    				
      

      					
    • `$item` is the item in model which started being moved
      • 

      					
    • `$part` is the part from which the $item originates
      • 

      					
    • `$index` is the index of the $item in $part
      • 

      					
    • `$helper` is the jqLite/jQuery object of an element that is being dragged around
      • 

      				
    

    			
    • 

    			
  • `sv-on-stop` - The expression passed as a value of that attribute will be evaluated when a user stops moving an element (drops it). This will be called regardless of the fact whether elements have been reordered or now. Several parameters can be injected there like: `sv-on-stop="baz($item, $part, $index)"` where:

    				
      

      					
    • `$item` is the item in model which started being moved
      • 

      					
    • `$part` is the part from which the $item originates
      • 

      					
    • `$index` is the index of the $item in $part
      • 

      				
    

    			
    • 

      * `sv-part` - this attribute should be placed on an element that is a container for the `ngRepeat`'ed elements. Its value should be the same as the right hand side expression in `ng-repeat` attribute.

      * `sv-element` - this attribute should be placed on the same element as `ng-repeat` attribute. Its (optional) value should be an expression that evaluates to the options object.

      * `sv-handle` - this attribute is optional. If needed it can be placed on an element within the sortable element. This element will be the handle for sorting operations.

      * `sv-helper` - the element with this attribute will serve as a custom helper for sorting operations

      * `sv-placeholder` - the element with this attribute will serve as a custom placeholder for sorting operations
    


    ###Example of single sortable list
    


    ```html

    

    	
    

    		
    {{item}}
    

    	
    

    

    ```
    


    ###Example of multiple sortable lists with common ancestor
    


    ```html

    

    	
    

    		
    

    			
    {{item}}
    

    		
    

    	
    

    	
    

    		
    

    			
    {{item}}
    

    		
    

    	
    

    

    ```
    


    ###Example of multiple sortable lists without common ancestor
    


    ```html

    

    	
    

    		
    

    			
    {{item}}
    

    		
    

    	
    

    	
    

    		
    

    			
    {{item}}
    

    		
    

    	
    

    

    ```
    


    ###Example of using handles
    


    ```html

    

    	
    

    		
    {{item}}
    

    		`

    	    

    

    

    ```
    


    ###Example of using custom helpers per part
    


    ```html

    

    	
    

    		custom helper

    	
    

    	
    

    		{{item}}

    	
    

    

    ```
    


    ###Example of using custom helpers per element
    


    ```html

    

    	
    

    		
    

    			custom helper {{item}}

    		
    

    		{{item}}

    	
    

    

    ```
    


    ###Example of using custom placeholders per part
    


    ```html

    

    	
    

    		custom placeholder

    	
    

    	
    

    		{{item}}

    	
    

    

    ```
    


    ###Example of using custom placeholders per element
    


    ```html

    

    	
    

    		
    

    			custom placeholder {{item}}

    		
    

    		{{item}}

    	
    

    

    ```
    


    ###Example of sorting with images

    _Because images are draggable by default the browser will trigger the default behavior of showing an image's ghost on a drag event rather than the mousedown event listener relied on by this module, disabling that drag behavior leaves the element free to move immediately._
    


    ```html

    

    	
    

    		

    	
    

    

    ```