ng-image-drag-drop
Version:
Drag & Drop for Angular - based on HTML5 with no external dependencies.
222 lines • 9.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Draggable = void 0;
var core_1 = require("@angular/core");
var ng_drag_drop_service_1 = require("../services/ng-drag-drop.service");
var dom_helper_1 = require("../shared/dom-helper");
var i0 = require("@angular/core");
var i1 = require("../services/ng-drag-drop.service");
var Draggable = exports.Draggable = /** @class */ (function () {
function Draggable(el, renderer, ng2DragDropService, zone) {
this.el = el;
this.renderer = renderer;
this.ng2DragDropService = ng2DragDropService;
this.zone = zone;
/**
* Currently not used
*/
this.dragEffect = 'move';
/**
* Defines compatible drag drop pairs. Values must match both in draggable and droppable.dropScope.
*/
this.dragScope = 'default';
/**
* The CSS class applied to a draggable element. If a dragHandle is defined then its applied to that handle
* element only. By default it is used to change the mouse over pointer.
*/
this.dragHandleClass = 'drag-handle';
/**
* CSS class applied on the source draggable element while being dragged.
*/
this.dragClass = 'drag-border';
/**
* CSS class applied on the drag ghost when being dragged.
*/
this.dragTransitClass = 'drag-transit';
/**
* Event fired when Drag is started
*/
this.onDragStart = new core_1.EventEmitter();
/**
* Event fired while the element is being dragged
*/
this.onDrag = new core_1.EventEmitter();
/**
* Event fired when drag ends
*/
this.onDragEnd = new core_1.EventEmitter();
/**
* @private
* Backing field for the dragEnabled property
*/
this._dragEnabled = true;
}
Object.defineProperty(Draggable.prototype, "dragImage", {
get: function () {
return this._dragImage;
},
/**
* The url to image that will be used as custom drag image when the draggable is being dragged.
*/
set: function (value) {
this._dragImage = value;
this.dragImageElement = new Image();
this.dragImageElement.src = this.dragImage;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Draggable.prototype, "dragEnabled", {
get: function () {
return this._dragEnabled;
},
/**
* Defines if drag is enabled. `true` by default.
*/
set: function (value) {
this._dragEnabled = value;
this.applyDragHandleClass();
},
enumerable: false,
configurable: true
});
;
Draggable.prototype.ngOnInit = function () {
this.applyDragHandleClass();
};
Draggable.prototype.ngOnDestroy = function () {
this.unbindDragListeners();
};
Draggable.prototype.dragStart = function (e) {
var _this = this;
if (this.allowDrag()) {
// This is a kludgy approach to apply CSS to the drag helper element when an image is being dragged.
dom_helper_1.DomHelper.addClass(this.el, this.dragTransitClass);
setTimeout(function () {
dom_helper_1.DomHelper.addClass(_this.el, _this.dragClass);
dom_helper_1.DomHelper.removeClass(_this.el, _this.dragTransitClass);
}, 10);
this.ng2DragDropService.dragData = this.dragData;
this.ng2DragDropService.scope = this.dragScope;
// Firefox requires setData() to be called otherwise the drag does not work.
// We don't use setData() to transfer data anymore so this is just a dummy call.
if (e.dataTransfer != null) {
e.dataTransfer.setData('text', '');
}
// Set dragImage
if (this.dragImage) {
e.dataTransfer.setDragImage(this.dragImageElement, 0, 0);
}
e.stopPropagation();
this.onDragStart.emit(e);
this.ng2DragDropService.onDragStart.next(false);
this.zone.runOutsideAngular(function () {
_this.unbindDragListener = _this.renderer.listen(_this.el.nativeElement, 'drag', function (dragEvent) {
_this.drag(dragEvent);
});
});
}
else {
e.preventDefault();
}
};
Draggable.prototype.drag = function (e) {
this.onDrag.emit(e);
};
Draggable.prototype.dragEnd = function (e) {
this.unbindDragListeners();
dom_helper_1.DomHelper.removeClass(this.el, this.dragClass);
this.ng2DragDropService.onDragEnd.next(false);
this.onDragEnd.emit(e);
e.stopPropagation();
e.preventDefault();
};
Draggable.prototype.mousedown = function (e) {
this.mouseDownElement = e.target;
};
Draggable.prototype.allowDrag = function () {
if (this.dragHandle) {
return dom_helper_1.DomHelper.matches(this.mouseDownElement, this.dragHandle) && this.dragEnabled;
}
else {
return this.dragEnabled;
}
};
Draggable.prototype.applyDragHandleClass = function () {
var dragElement = this.getDragHandleElement();
if (!dragElement) {
return;
}
if (this.dragEnabled) {
dom_helper_1.DomHelper.addClass(dragElement, this.dragHandleClass);
}
else {
dom_helper_1.DomHelper.removeClass(this.el, this.dragHandleClass);
}
};
Draggable.prototype.getDragHandleElement = function () {
var dragElement = this.el;
if (this.dragHandle) {
dragElement = this.el.nativeElement.querySelector(this.dragHandle);
}
return dragElement;
};
Draggable.prototype.unbindDragListeners = function () {
if (this.unbindDragListener) {
this.unbindDragListener();
}
};
Draggable.ɵfac = function Draggable_Factory(t) { return new (t || Draggable)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i1.NgDragDropService), i0.ɵɵdirectiveInject(i0.NgZone)); };
Draggable.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: Draggable, selectors: [["", "draggable", ""]], hostVars: 1, hostBindings: function Draggable_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("dragstart", function Draggable_dragstart_HostBindingHandler($event) { return ctx.dragStart($event); })("dragend", function Draggable_dragend_HostBindingHandler($event) { return ctx.dragEnd($event); })("mousedown", function Draggable_mousedown_HostBindingHandler($event) { return ctx.mousedown($event); })("touchstart", function Draggable_touchstart_HostBindingHandler($event) { return ctx.mousedown($event); });
} if (rf & 2) {
i0.ɵɵhostProperty("draggable", ctx.dragEnabled);
} }, inputs: { dragData: "dragData", dragHandle: "dragHandle", dragEffect: "dragEffect", dragScope: "dragScope", dragHandleClass: "dragHandleClass", dragClass: "dragClass", dragTransitClass: "dragTransitClass", dragImage: "dragImage", dragEnabled: "dragEnabled" }, outputs: { onDragStart: "onDragStart", onDrag: "onDrag", onDragEnd: "onDragEnd" } });
return Draggable;
}());
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Draggable, [{
type: core_1.Directive,
args: [{
selector: '[draggable]'
}]
}], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.NgDragDropService }, { type: i0.NgZone }]; }, { dragData: [{
type: core_1.Input
}], dragHandle: [{
type: core_1.Input
}], dragEffect: [{
type: core_1.Input
}], dragScope: [{
type: core_1.Input
}], dragHandleClass: [{
type: core_1.Input
}], dragClass: [{
type: core_1.Input
}], dragTransitClass: [{
type: core_1.Input
}], dragImage: [{
type: core_1.Input
}], dragEnabled: [{
type: core_1.HostBinding,
args: ['draggable']
}, {
type: core_1.Input
}], onDragStart: [{
type: core_1.Output
}], onDrag: [{
type: core_1.Output
}], onDragEnd: [{
type: core_1.Output
}], dragStart: [{
type: core_1.HostListener,
args: ['dragstart', ['$event']]
}], dragEnd: [{
type: core_1.HostListener,
args: ['dragend', ['$event']]
}], mousedown: [{
type: core_1.HostListener,
args: ['mousedown', ['$event']]
}, {
type: core_1.HostListener,
args: ['touchstart', ['$event']]
}] }); })();
//# sourceMappingURL=draggable.directive.js.map