My code allows for the user to move a div around a container div by clicking and dragging the top, much like a window on a desktop. It does this by waiting for mousedown then mousemove, getting current curser location and moving the div via css margin-left and margin-top relative to the curser location. Once the user lifts the mouse, the current css margin-left and margin-top are retrieved and a new mousemove event is used to override the previous one and set the div to its current position each time the mouse moves. I'm wondering if there is a way of doing this so that:
1) there does not need to be a new mousemove event simply for moving the mouse after releasing it.
2) code allows the mouse to drag the .frame-container from any place within .move-frame-container without having to snap to a specific starting position (i.e: e.pageX - 70, e.pageY -10).
$(document).ready(function() {
$('.move-frame-container').mousedown(function() {
$(this).mousemove(function(e){
var horz_next = e.pageX - 70;
var vert_next = e.pageY -10;
$(".frame-container").css({"margin-left":horz_next});
$(".frame-container").css({"margin-top":vert_next});
});
});
$('.move-frame-container').mouseup(function() {
var horz_after = $(".frame-container").css("margin-left");
var vert_after = $(".frame-container").css("margin-top");
$('.move-frame-container').mousemove(function(){
$(".frame-container").css({"margin-left":horz_after});
$(".frame-container").css({"margin-top":vert_after});
});
});
});
The whole thing
