Friday

draggable popup in jQuery

Most plugins for this purpose are much too over-featured for my taste. All I need is a simple function to let be drag my popup div.


$('#popup #draghandle').mousedown(function(e){
var d = $(this).parent().parent().parent().parent().parent().parent();
var dx = d.offset().left;
var dy = d.offset().top;
var xgap = e.pageX-dx;
var ygap = e.pageY-dy;
if (!$.browser.msie) {
e.preventDefault();
}
$(document).mousemove(function(e){
var x = e.pageX-xgap;
var y = e.pageY-ygap;
if ($.browser.msie) {
// IE only here
e.preventDefault(); //IE's
if(e.pageX >= 0 && e.pageY >= 0) d.css({left: x, top: y });
return false;
}
// FF only here
if(e.pageX >= 0 && e.pageY >= 0) d.css({left: x, top: y });
return true;
});
}).mouseup(function(e){ $(document).unbind('mousedown');$(document).unbind('mousemove');});

2 comments:

Anonymous said...

For myself, return false; in both the mousedown and the mousemove bind function was sufficient to make it works in IE && FF.

Anonymous said...

Hello, found your posts on preventDefault interesting. I'm cleaning up some code that was written by someone else that had a mix of jquery and YAHOO.event stuff in it. One place puzzled me was the preventDefault() invocation on the YAHOO event object. It seems that from reading the jquery event object details that they handle this to the W3C spec. Just an FYI. Wonder if things have gotten better since your original post.