fsadragdrop

fsaDragDrop

A set of directives for dragging, dropping and resizing DOM objects

Installation

• First npm install fsadragdrop
• add fsadragdrop into your document (note: take out the extra spaces in the script tags)

  < script src="/fsadragdrop/fsadragdrop.js">< /script>

• Next inject fsadragdrop into your project

  angular.module('app', ['fsadragdrop']);

Usage

Now you can place any of the following attributes on any DOM object.

fsadraggable:

Simply add 'fsadraggable' as an attribute on any element. Now that element can be dragged anywhere on the page.

Note: while this will work on any element, it prevents the default function of mouse dragging on that element, e.g if you stick this on a paragraph you will no longer be able to highlight that paragraph’s text.

fsaresizeable:

By adding 'fsaresizeable' as an attribute you will be able to resize that element. Click the right or bottom edges of the element to resize it.

Note: the width of the clickable border can be manually adjusted. Go into the fsaresizeable directive and modify the borderWidth variable in the fsaresizeable directive to be any value you want in pixels, the default is 10 pixels.

Note: While you are able to drag an element anywhere you want on the DOM, the DOM still will treat that element as if it were in its original position. E.g if you drag and resize an element, the DOM will expand as if that element were resizing where it originally was.

fsacontainer:

When you add 'fsacontainer' to an element, it provides several things.

• First it provides an element in which an fsadraggable object can be anchored to. In other words, the drag events on an fsadraggable element will also fire the drop events on an fsacontainer element.
• Second it allows the transfer of data from the fsadraggable object to the fsacontainer object. To utilize the data transfer functionality, follow these steps:

• Set fsadraggable and fsasetdata as attributes on the object you wish to drag.

  < div fsadraggable fsasetdata>< /div>

• Set fsacontainer and fsagetdata as attributes on the object you wish to drag into.

  < div fsacontainer fsagetdata>< /div>

• On the fsadraggable element, set the attribute fsasetdata equal to some scope object from the initial controller:

  fsasetdata=”{{initialcontrollerdata}}”

• Inject $attrs into the receiving controller:

  app.controller('receivingController', function ($scope, $attrs) {})

• Inside the receiving controller, set the receiving data variable equal to $attrs.fsacontainer:

  var myReceivedData = $attrs.fsagetdata

• And that’s it! All you have to do now is drag the fsadraggable element into the fsacontainer element. You will be able to drag multiple elements to and from the container element. Each time you do, the fsagetdata attribute will be appended with a new index containing the new information. Elements can be dragged in multiple times.

  For example, say you had two divs: the first is a shopping list, the second is an item. You would set fsadraggable and fsasetdata on the item div, and fsacontainer and fsagetdata on the shopping list div. When you drag the item into the shopping list, the object that is on the item's controller will be transferred through the fsagetdata and fsasetdata methods. It will then become available to the shopping list controller as the 0th index on an array stored on fsagetdata. By either adding more item divs or redragging the first item into the shopping cart div, you will append more items onto the fsagetdata array.

  Note: that myReceivedData should be treated like an async variable. It will not be filled with data until you drag the initial object into the container object.