Cancel mousedown/move events with mouseup event

[UrbanDweller]

Hey,

 

Im trying to create a div which is movable only inside its parent div but before i can really test my code to see if it wants to keep to the restrictions i need to be able to cancel the mousedown/move mouse event that make the child div move.

 

At the moment I can release my mouse and the div still follows it, the code is a bit long but the mouse event structure that calls the needed functions is like so..

 

Thanks team

 

eventHandling();
cropDiv = document.getElementById("cropDiv"); // is global variable created in previous function that creates div dimensions.

function eventHandling(){
cropDiv.onmousedown = OnMouseDown;
cropDiv.onmouseup = OnMouseUp;
}

function OnMouseUp(e){
     document.onmousemove = null;
      document.onmousemove = null;
      document.onmouseup = null;
  return false;
}

function OnMouseDown(e){
//Mouse movement code "Not relevant"
       cropDiv.onmousemove = OnMouseMove;
}

[trq]

I would seriously reconsider writing this yourself. All the big JavaScript frameworks make this type of thing simple.

[UrbanDweller]

I know i could just use jquery but I dont know how to write jquery plus i like the feeling of coding this independently. I have the div moving fine inside of the parent div just cant cancel the mousedown function which moves the div which im sure is quite simple to end.

 

The whole idea of this is for cropping images for thumbnails for a friends shop.

[nogray]

Without seeing all the code it's hard to tell where the error is. Are you adding the mouse move event to the document or the parent element? your onmouseup remove the event from the document. Second issue you would have to deal with is when the mouse move out of the area (but the user didn't leave the button). The onmouseup event won't be triggered because of that, so you would need to check onmouseout.

 

The easiest way to do this is to sent the mousedown and mouseup on the document and use the target in your event to find out if the moveable element was cliicked.

[UrbanDweller]

Cool ill give that a go, so what understand from that is i create a document.onmousedown & onmouseup  and detect inside the down function see if cropDiv was clicked in the process.

 

In theory this will keep my current code working too as the moveable div's top left style depends on the difference in location from wen i called mousedown and compare it to the current mouse position inside the parent div in the mousemove function.

[UrbanDweller]

Has anyone actually created something like this successfully without jquery?

[UrbanDweller]

Thanks to you nogray and you answer I have got the mouseup to work and have now been able to make some real improvements on my code to fit a more dynamic approach.

 

The movement is working perfectly i can mousedown and move the div every time and remove it from the last position i left it, now I have to figure out a way to limit the div movement inside the div cause once i hit the edge wen i put a basic limitation on it, it just sticks to the side as the variables in the if statement dont change wen i need them to

 

Just thought I would let ya know where im at as I'm pretty stoked with my progress as i have really only used js for displaying and hiding elements. I just couldnt see jquery being very fun to code with as most of the raw math and code is done for you which i find great figuring out lol

[trq]

Has anyone actually created something like this successfully without jquery?

 

In the past maybe, but these days, why bother? jQuery takes *most* of the hassle out of different browsers behaving differently for starters.