I want to make Draggable div i know this can be done using Jquery plug in but I don't want to use because I just need only draggable function. so how can I make draggable function I have did this
$(document).ready(function(e){
$("#eve").mousemove(function(e){
var p=$(this);
var offset = p.offset();
var ol=offset.left;
var ot=offset.top;
var l=e.pageX-ol;
var t=e.pageY-ot;
var eX=e.pageX;
var eY=e.pageY;
var htm="left:"+ol+" top:"+ot+"<br/>";
htm+="eX:"+eX+" eY:"+eY+"<br/>";
htm+="curX:"+l+" curY:"+t+"<br/>";
htm+="l:"+(ol-l)+" t:"+(ot-t);
p.html(htm);
p.css({left:((eX-3))+"px",top:((eY-3))+"px"});
});
Here is my fast improvisation. Maybe this is exactly you are looking for.
$("div").on({
mousemove: function(e) {
var el = $(this);
var data = el.data("down");
if (data) {
el.css({
left: e.pageX - data.left,
top: e.pageY - data.top
});
}
},
mousedown: function(e) {
var el = $(this);
var pos = el.offset();
el.data("down", {
left: e.pageX - pos.left,
top: e.pageY - pos.top
});
},
mouseup: function() {
$(this).data("down", false);
}
});
DEMO: http://jsfiddle.net/UBKBb/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With