tushar-ng-drag-drop
Version:
Simple drag and drop for angular
2 lines • 6.56 kB
JavaScript
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("ngx-drag-drop"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("tushar-ng-drag-drop",["exports","@angular/core","ngx-drag-drop","@angular/platform-browser"],r):r((e=e||self)["tushar-ng-drag-drop"]={},e.ng.core,e.ngxDragDrop,e.ng.platformBrowser)}(this,(function(e,r,n,t){"use strict";var o=function(){function e(){}return e.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=r.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),d=function(){function e(){this.documentList=[],this.documentTypeList=[],this.onDraggable=new r.EventEmitter,this.onLeftDraggableDrop=new r.EventEmitter,this.onRightDraggableDrop=new r.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.onDraggableStart=function(e){this.currentDraggableEvent=e,this.onDraggable.emit(e)},e.prototype.onLeftDraggableCopied=function(e){var r=this.documentList.indexOf(e);this.documentList.splice(r,1)},e.prototype.onRightDraggableCopied=function(e){var r=this.documentTypeList.indexOf(e);this.documentTypeList[r].content=""},e.prototype.onLeftDrop=function(e){var r=JSON.parse(JSON.stringify(e)).index;void 0===r&&(r=this.documentList.length);var n=JSON.parse(JSON.stringify(this.currentDraggableEvent));n.content=n.content,n.effectAllowed="move",n.disable=!1,n.handle=!0,n.show=!0,this.documentList.splice(r,0,n),this.onLeftDraggableDrop.emit(this.documentList)},e.prototype.onRightDrop=function(e,r){var n=JSON.parse(JSON.stringify(this.currentDraggableEvent)),t=this.documentTypeList.indexOf(r);this.documentTypeList[t].content=n.content,this.onRightDraggableDrop.emit(this.documentTypeList)},e.decorators=[{type:r.Component,args:[{selector:"tushar-ng-drag-drop",template:'\r\n\r\n\r\n<div class="row">\r\n <div class="col col-sm-5 ol-xs-12 documentList ">\r\n <ol class="list-group scrolling "\r\n dndDropzone dndEffectAllowed="copyMove"\r\n (dndDrop)="onLeftDrop($event)">\r\n <span *ngFor="let draggable of documentList">\r\n <li [dndEffectAllowed]="draggable.effectAllowed"\r\n [dndDraggable]="draggable.data"\r\n (dndStart)="onDraggableStart(draggable)"\r\n (dndMoved)="onLeftDraggableCopied(draggable)"\r\n class="list-group-item" *ngIf="draggable.show">\r\n <div >{{draggable.content}}</div>\r\n </li>\r\n </span>\r\n <li class="dd-placeholder" style="height: 36px;"\r\n dndPlaceholderRef>\r\n </li>\r\n </ol>\r\n </div>\r\n \r\n <div class="col-sm-1 scrolling-without-border text-allign-middle hidden-xs" >\r\n <i class=\'fa fa-arrows-h\' style=\'font-size:48px;color:gray; vertical-align: middle;\'></i>\r\n </div>\r\n <div class="col-sm-1r text-allign-middle visible-xs" >\r\n <i class=\'fa fa-arrows-v\' style=\'font-size:48px;color:gray; vertical-align: middle;\'></i>\r\n </div>\r\n\r\n <div class="col-sm-6">\r\n <section class=" col col-sm-12 scrolling documentTypeList">\r\n <div class="form-horizontal" *ngFor="let draggable of documentTypeList">\r\n <div class="form-group" *ngIf="draggable.show" >\r\n <label *ngIf="draggable.type != undefined" class="control-label col-sm-3" style="text-align: left; margin-top: 10px;;">\r\n {{draggable.type}} : \r\n </label>\r\n <div class="col col-sm-{{draggable.type == undefined?12:9}} ">\r\n <ol class=""\r\n dndDropzone class="dd-empty dndDragover"\r\n dndEffectAllowed="copyMove"\r\n [dndDisableIf]="draggable.content != \'\'"\r\n (dndDrop)="onRightDrop($event,draggable)">\r\n <li [dndEffectAllowed]="draggable.effectAllowed"\r\n [dndDraggable]="draggable.data"\r\n (dndStart)="onDraggableStart(draggable)"\r\n (dndMoved)="onRightDraggableCopied(draggable)"\r\n class="dd-item {{draggable.class}}" *ngIf="draggable.content != \'\'">\r\n <div class="dd-handle">{{draggable.content}}</div>\r\n </li>\r\n <li class="dd-placeholder"\r\n dndPlaceholderRef></li>\r\n </ol>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</div>\r\n\r\n\r\n',styles:[".dd-handle{display:block;font-size:15px;padding:9px 15px;color:#333;text-decoration:none;border:1px solid #cfcfcf;background:#fbfbfb;border-radius:4px}.dd-empty,.dd-placeholder{margin:5px 0;padding:0;min-height:30px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box;-moz-box-sizing:border-box}.dd-empty{min-height:41px!important;background-image:none!important;background-color:#fff!important;border:1px solid #d1d1d1!important;border-radius:4px}.scrolling{height:300px!important;overflow-y:scroll;border:1px solid #d1d1d1!important;margin-top:5px}.scrolling-without-border{height:300px!important;overflow-y:scroll;margin-top:5px}ol li{list-style-type:none}.documentList li{margin:5px}.dd-placeholder{margin:0;padding:0;border-radius:4px;min-height:40px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box;-moz-box-sizing:border-box}.documentTypeList .form-group{margin-bottom:0}::-webkit-scrollbar{width:5px}.text-allign-middle{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;text-align:center}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={documentList:[{type:r.Input}],documentTypeList:[{type:r.Input}],onDraggable:[{type:r.Output}],onLeftDraggableDrop:[{type:r.Output}],onRightDraggableDrop:[{type:r.Output}]},e}();var a=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{declarations:[d],imports:[n.DndModule,t.BrowserModule],exports:[d]}]}],e}();e.DragDropComponent=d,e.DragDropModule=a,e.DragDropService=o,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=tushar-ng-drag-drop.umd.min.js.map