JS Drag and Drop to target without knowing its position

I am creating a simple app which allows for the dragging of multiple img's to a target div on a page. When 开发者_如何转开发the img is dragged and release on the target div the img's properties are noted.

---

Unfortunately my web page is built on percentages and I am wondering if there is anyway way this can be done without knowing the top, left etc positions of the target area. In other words, without working with absolutes.

I've gotten the dragging part working fine it's just simulating the detection which I am finding tricky.

I think I've gotten pretty close using the mouseover event on the target div but of course the dragging img blocks the event firing. When I release my image it resets to its normal position and gives a brief time for the mouseover to seem suitable.

However in tests it would seem that this time gap doesn't give the mouseover enough time to fire (if that is even possible). I believe this is the case because I put an alert right after the dragged image stops blocking the target div and the img's properties are succesfully printed to my console log.

---

img.style.position = "relative";
img.style.left = "0px";
img.style.top = "0px";

var startDrag = function(e){
    initialMouseX = e.clientX;
    initialMouseY = e.clientY;
    initialElementX = initialElementY = "0px";
    img.style.zIndex = 1000;
    document.addEventListener("mouseup", removeDrag, true);
    document.addEventListener("mousemove",movement,true);
    document.getElementById("drag-area").addEventListener("mouseover",
    readPeriod,true); //mouseover event starts when the user presses the img
};

var removeDrag = function(e){
    document.removeEventListener("mousemove",movement,true);
    img.style.left="0px";
    img.style.top="0px";
    img.style.zIndex = 0;
    //an alert at this point gives the mouseup time to fire
    img.removeEventListener("mouseup", removeDrag, true);
        //mouseover ends after the img has stopped blocking the mouse
    };

var movement = function(e){
    /*Code which moves the dragging img by style.left/top*/
};

var readPeriod = function(e){
    console.log(img.name); //Point of simulated on target div
};

img.addEventListener("mousedown",startDrag,true);

So in summary I am trying to simulate the image dropping onto the target since its impossible to deduce the target div by its location on screen.

(Unfortunately I am unable to use a js library to aid me in this situation.)

---

You should probably use jQuery UI's Droppable. Things would be much simpler and you won't need to solved problems like this.
People invested many hours in making this work correctly. You shouldn't waste your time again and solve all these bugs again.
On top of that, you would be able to mark the drop target by ID and won't need to deal with coordinates