I'm currently working on a project w/c mimics the function of a music editor software (Im applying it online or web based). I'm having problem in inserting notes(image) on a div (w/c has a background image of a staff) w/c will be positioned on the exact location where the mouse is clicked. At the same time after inserting the note(image) it can also be drag or drop to change its position and after realising the left click it will auto docked in a certain position (notes are positioned into the staff on spaces or lines).

I have currently made some existing script but having problem in continuing the other functionality. Please refer to the link ive given and make some feedback for necesarry updates or changes. All types of help will be appreciated.