Drag and drop dataobjects with angular using directives and HTML5
jsFiddle example http://jsfiddle.net/ADukg/2516/
Live example http://www.devfishy.com/dnd
Todo
- Bind drag to drop, So we only can drop on specific drop if wanted.
drop
drop - Context of the drop directive
whenDrop - Takes a function thats called when drag is dropped
whenEnter - Takes a function thats called when drag enters drop-area
whenLeave - Takes a function thats called when drag leaves drop-area
drag
drag - Context of the current drag item.
whenStart - Takes a function to be called when drag starts
whenEnd - Takes a function to be called when drag ends
<div ng-controller="MyCtrl" class="wrapper">
<div class="objects">
<div ng-repeat="item in htmlItems"
drag="item"
class="span12">
<span>{{item.name}}</span>
</div>
</div>
<div drop="html"
when-drop="addToLayout(data)"
when-enter="previewHtml(data)"
when-leave="removePreview(data)"
class="html">
<div ng-bind-html-unsafe="drop">
</div>
</div>
</div>
Exampel of usage
