diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js index ec1511a..f272e9d 100644 --- a/public/js/crop_editor.js +++ b/public/js/crop_editor.js @@ -71,6 +71,7 @@ class CropEditor { this.image_container.appendChild(this.crop_boundary); this.original_image = document.createElement("img"); + this.original_image.draggable = false; this.original_image.id = "original_image"; this.original_image.src = this.opt.original_image_src; this.image_container.appendChild(this.original_image); @@ -134,6 +135,7 @@ class CropEditor { this.container.style.display = ''; this.setInputValues(); this.positionBoundary(); + this.addEvents(); } save() { @@ -175,23 +177,33 @@ class CropEditor { } addEvents(event) { - let drag_target = document.getElementById(opt.drag_target); - drag_target.addEventListener('dragstart', this.dragStart); - drag_target.addEventListener('drag', this.drag); - drag_target.addEventListener('dragend', this.dragEnd); + let drag_target = this.image_container; + drag_target.addEventListener('mousedown', this.dragStart); + drag_target.addEventListener('mousemove', this.drag); + drag_target.addEventListener('mouseup', this.dragEnd); + drag_target.addEventListener('mouseout', this.dragEnd); + + this.original_image.addEventListener('mousedown', event => {return false}); } dragStart(event) { - console.log(event); - event.preventDefault(); + this.isDragging = true; + console.log(`Start @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); } dragEnd(event) { - console.log(event); + if (!this.isDragging) { + return; + } + this.isDragging = false; + console.log(`End @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); } drag(event) { - console.log(event); + if (!this.isDragging) { + return; + } + console.log(`Drag @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); } toggleCropButton() { diff --git a/templates/EditAssetForm.php b/templates/EditAssetForm.php index 1dd3ed6..55911d7 100644 --- a/templates/EditAssetForm.php +++ b/templates/EditAssetForm.php @@ -200,7 +200,7 @@ class EditAssetForm extends SubTemplate original_image_src: "', $this->asset->getUrl(), '", editor_container_parent_id: "asset_form", thumbnail_select_id: "thumbnail_src", - drag_target: "drag_target", + drag_target: ".crop_image_container", asset_id: ', $this->asset->getId(), ', after_save: function(data) { // Update thumbnail