jQuery Drag continues with mousemove if a new element is being appended in DOM

Question

I am trying to make a image crop and text edit system with several libraries I got from internet.

Image cropping is working fine also adding text field and dragging working fine.

Problem is : Whenever I try to append new image element after cropping with canvas and append 'dummy text' by clicking 'Text' button and trigger double click event on this new appended text, jQuery drag continues with mousemove even after triggering mouseup event.

To stop this, I tried many methods, like I set events like 'double click' to activate resizing but disable dragging, and 'single click' to activate dragging facility again.

** Whenever I trigger double click, it makes the content editable.

Here is the zip file link for my dummy project. https://orionhub.org/file/subhajit06-OrionContent/cc/canvas-crop.zip

Please check the issue and let me know a solution.

Thanks in Advance

Answer 1

I have found the problem here. The dragging issue was conflicting because of 'CropBox.js'. In this js file there is line as:

self.mouseup = Y.one('body').on('mouseup', self.imgMouseUp, self);

This line code was calling all elements inside 'body' tag. So I replaced this 'body' with a particular id.

Now there is no conflict no issue.

Thnaks