• Stars
    star
    1,752
  • Rank 26,578 (Top 0.6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 12 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Implementing jQueryUI Drag and Drop functionality in AngularJS (with Animation) is easier than ever

Drag and Drop for AngularJS (with Animation)

Build Status npm jsDelivr Hits npm version Bower version


Implementing jQueryUI Drag and Drop functionality in AngularJS is easier than ever with this wrapper for jQueryUI draggable/droppable components.

v1.0.13

  1. Allow to animate back on beforeDrop-cancel event if jqyouioptions.revertDuration is set
  2. Pass right context in case of CtrlAs syntax
  3. Add vertical sortable example in demo/dnd-insertInline.html

How to Use

  • bower install angular-dragdrop (or sudo bower install angular-dragdrop --allow-root)

  • Reference angular-dragdrop.min.js in your application as:

<script src="components/angular-dragdrop/src/angular-dragdrop.min.js"></script>
  • Resolve the dependency in the main module of your application as:
angular.module('myApp', ['ngDragDrop'])
  • Drag anything as:
<span data-drag="true" jqyoui-draggable>So you think you can drag</span>

Angular Draggable options

  • jqyoui-draggable – A custom angular attribute to make any element draggable. It holds more settings such as:
    • index – number – $index of an item of a model (if it is an array) associated with it
    • placeholder – boolean/string – If true, the place will be occupied even though a dragggable is moved/dropped somewhere else. If 'keep' is supplied, the original item won't be removed from the draggable.
    • animate – boolean – If true, draggable will be animated towards droppable when dropped. If multiple is not set to true on droppable then its draggable will swap its position.
    • onStart – string – callback method to be invoked (has to be defined in a controller) when dragging starts
    • onStop – string – callback method to be invoked when dragging stops
    • onDrag – string – callback method to be invoked while the mouse is moved during the dragging
    • applyFilter - string - applies AngularJS $filter on the list before swapping items. Only applicable, if ngRepeat has any filter (such as orderBy, limitTo) associated with it.
    • containment – string - position/offset. Offset by default. This forces to use jQuery.position() or jQuery.offset() to calculate proper position with respect to parent element or document respectively.
    • deepCopy - boolean (optional) – If true, makes a deep copy of draggable that looses prototypical inheritance.
    • beforeDrop – promise (optional) – Ask for confirmation before swapping. Works with both window.confirm and custom popup.
    • insertInline – boolean(optional) – Make a list sortable. Same model is mandatory for draggable and droppable.
    • direction – string(optional) – Property name that will be created on each scope to manage animation direction.
  • data-drag – boolean – If true, element can be draggable. Disabled otherwise.
  • data-jqyoui-options – object – should hold all the valid options supported by jQueryUI Draggable
  • ng-model – string – An angular model defined in a controller. Should be a JS array or object

Angular Droppable options

  • jqyoui-droppable – A custom angular attribute to make any element droppable. It holds more settings such as:
    • index – number – $index of an item of a model (if it is an array) associated with it
    • multiple – boolean – Requires to be true only if animate is set to true for draggable and to avoid swapping.
    • stack – boolean – Requires if animate is set to true on draggable and if multiple draggables positioned one below the other
    • onDrop – string – callback method to be invoked a draggable is dropped into the droppable
    • onOver – string – callback method to be invoked when an accepted draggable is dragged over the droppable
    • onOut – string – callback method to be invoked when an accepted draggable is dragged out of the droppable
    • applyFilter - string - requires if both droppable as well as draggable share the same ngModel.
    • containment – string - position/offset. Offset by default. This forces to use jQuery.position() or jQuery.offset() to calculate proper position with respect to parent element or document respectively.
    • deepCopy – boolean (optional) – If true, makes a deep copy of droppable that looses prototypical inheritance.
    • beforeDrop – promise (optional) – Ask for confirmation before dropping. Works with both window.confirm and custom popup.
  • data-drop – boolean – If true, element can be droppable. Disabled otherwise.
  • data-jqyoui-options – object – should hold all the valid options supported by jQueryUI Droppable
  • ng-model – string – An angular model defined in a controller. Should be a JS array or object.

How to Contribute

Demo

Demo is here

v1.0.12

  1. Supports insertInline option to simulate sortable functionality.
  2. Relies on ngAnimate for sortable animation from left/right.
  3. Checkout the demo in demo/dnd-insertInline.html

v1.0.9 - breaking change

  1. Draggable and Droppable will not be deep copied by default unlike previous versions. Use deepCopy option if prototypical inheritance is not required.
  2. Callbacks will not be executed forcefully within the context of scope which requires an extra digest loop for each event (start, stop, over, out, etc), especially drag that fires many times and running a digest loop is performance intensive in such scenario. Call scope.$apply() within callback, if needed.

v1.0.5 - breaking change

Do not pass evaluated expressions in callbacks. For example,

Before:

<div jqyoui-draggable="{onStart:'startCallback({{item}})'}">{{item.title}}</div>

After:

<div jqyoui-draggable="{onStart:'startCallback(item)'}">{{item.title}}</div>

Support

If you're having problems with using the project, use the support forum at CodersClan.

More Repositories

1

addressbookMVC

Made this in order to dig some of the known MV* frameworks having PHP & Mysql in the backend.
JavaScript
17
star
2

eShell

An eLearning player – a building block for more conventional eLearning courses to be run on created with authoring tools. Such players basically consist of different kinds of templates/activities backed by XML/JSON data (produced by Authoring Tools).
CSS
16
star
3

socialFlair

Stackoverflow like User Flairs to showcase your Social Profiles on your personal website or blog
JavaScript
16
star
4

Pedigree-Family-Tree

Pedigree/Family Tree using HTML table
PHP
7
star
5

angular-directives-in-traction

A goto guide for any angular developer to learn angular directives from ground up
JavaScript
6
star
6

you-might-not-need-angular-flex-layout

This is about my research on Tailwind CSS to be a strong contender for replacing Angular Flex Layout in Angular applications.
HTML
4
star
7

after-reader

Do not let your reading habit die with Google Reader!
JavaScript
3
star
8

proquery

jQuery like syntactical sugar for Protractor
JavaScript
3
star
9

cardSwapper

A single page app created using backbone.js and locache.js.
JavaScript
3
star
10

Typeracer-Bot

A bookmarklet which can help you winning a typing race.
JavaScript
3
star
11

Bing-Image-Search-in-node.js

Bing Image Search in node.js
JavaScript
3
star
12

Ajaxify-jQueryUI-Accordion

Ajaxify jQueryUI Accordion
2
star
13

2-Pane-for-Gmail

A browser extension tuning Gmail with 2-pane navigation. It makes more room for mails by converting Gmail into a two-pane navigation scheme.
JavaScript
2
star
14

using-jquery-plugin-in-angular-boys-men-legends

Using jQuery Plugin in Angular: Boys, Men, and Legends
TypeScript
1
star
15

angular2-components-in-traction

This is a clone of Angular1 examples and I'm going to convert them to Angular2 to learn along the way :-)
HTML
1
star
16

usb.sh

Outputs mount point and serial number of any external devices attached to the computer in PIPE (|) separated format
Shell
1
star
17

foobar

foobar
JavaScript
1
star
18

Protest-SOPA

Go dark on Jan 18th to protest against SOPA
JavaScript
1
star
19

angularjs-directives-in-traction-the-book

A goto guide for any angular developer to learn angular directives from ground up
1
star
20

zf_neo

Writing your first application using Zend Framework
PHP
1
star
21

chromeshelf

Chromeshelf – A chrome extension to keep track of ebooks you want to read locally.
JavaScript
1
star
22

PRampage

Avoid rampage by enforcing PR review with @Mentions on GitHub. Comment `LGTM` if Okay.
JavaScript
1
star
23

jquery-video-series-the-making-of-addressbook

jQuery video series: The making of Address book
JavaScript
1
star
24

chatify

A chrome extension to automatically group your online buddies based on Contact Groups they are into.
JavaScript
1
star
25

emacs.d

Emacs Settings
Emacs Lisp
1
star
26

Project-Euler-Puzzles

PHP
1
star
27

apparatus

Find who owns a device among your peers without asking each one of them and being lucky!
JavaScript
1
star