Resolved Drag and Drop JQuery [Archive]

View Full Version : Resolved Drag and Drop JQuery

Deadweight

04-08-2014, 12:06 AM

I am currently trying to drag and drop this div box. It will move but after it resets itself. I am not sure why but it is kinda annoying. Any change anyone knows why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Element</title>

<script src="../js/jquery-1.9.js"></script>
<script>
$(document).ready(function() {
var $dragging = null
var moveX = 0
var moveY = 0

$(document.body).on("mousemove", function(e) {
if ($dragging) {
$dragging.offset({
left: parseInt(e.pageX - moveX),
top: parseInt(e.pageY - moveY)
});
}

});

$(document.body).on("mousedown", ".drag", function (e) {
$dragging = $(e.target)
moveX = parseInt(e.pageX-$(this).parent().offset().left)
moveY = parseInt(e.pageY-$(this).parent().offset().top)
dev("Left: "+moveX+' - Top: '+moveY)

});

$(document.body).on("mouseup", function (e) {
moveX = parseInt(e.pageX-$(this).parent().offset().left)
moveY = parseInt(e.pageY-$(this).parent().offset().top)

$dragging = null

dev("Left: "+moveX+' - Top: '+moveY)
});
});
function dev(s){
$("#dev").text(s)
}
</script>

<style>
* {margin:0;}
html,body { height:100%;}
.drag { width: 200px; height: 200px; border: 1px solid black; }
</style>

</head>
<body>

<div class="drag">Content</div>
<div id="dev"></div>

</body>
</html>

jscheuer1

04-13-2014, 03:23 PM

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Element</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $dragging = null;
var moveX = 0;
var moveY = 0;
var currentX, currentY; //vars to hold reference to current X/Y event position

$(document.body).on("mousemove", function(e) {
if ($dragging) {
e.preventDefault(); //stop highlighting of text and images in some browsers during drag
var o = $dragging.offset(); //where the object is
$dragging.offset({ //where the object is + where the mouse is - where the mouse was
left: o.left + e.pageX - currentX,
top: o.top + e.pageY - currentY
});
currentX = e.pageX;//remember where the mouse pointer is now
currentY = e.pageY;
}

});

$(document.body).on("mousedown", ".drag", function (e) {
$dragging = $(e.target)
$dragging && e.preventDefault(); //stop highlighting of text and images in some browsers during drag
moveX = parseInt(e.pageX-$(this).parent().offset().left)
moveY = parseInt(e.pageY-$(this).parent().offset().top)
currentX = e.pageX; //remember where the mouse pointer is now
currentY = e.pageY;
dev("Left: "+moveX+' - Top: '+moveY)

});

$(document.body).on("mouseup", function (e) {
moveX = parseInt(e.pageX-$(this).parent().offset().left)
moveY = parseInt(e.pageY-$(this).parent().offset().top)

$dragging = null

dev("Left: "+moveX+' - Top: '+moveY)
});
});
function dev(s){
$("#dev").text(s)
}
</script>

<style>
* {margin:0;}
html,body { height:100%;}
.drag { width: 200px; height: 200px; border: 1px solid black; }
</style>

</head>
<body>
<div class="drag">Content</div>
<div id="dev"></div>
<table style="width:150%;height:150%;">
<tr>
<td></td>
</tr>
</table>

</body>
</html>

Deadweight

04-16-2014, 02:59 PM

Actually there was a better way and here is what i did:

$(function(){
var dragging = null
var moveX = 0
var moveY = 0
$(document).on('mousedown','.drag',function(e){
dragging = e.target
var parentOff = $(this).offset()
moveX = parseInt(e.pageX - parentOff.left)
moveY = parseInt(e.pageY - parentOff.top)
})

$(document).on('mousemove',function(e){
if(dragging){
$(dragging).offset({top: (e.pageY-moveY), left: (e.pageX-moveX)})
}
})

$(document).on('mouseup',function(){
if(dragging)
dragging = null
})

})

Thanks tho

The problem i was having was that i was actually selecting the body tag in that instance and actually moving the body and not the selected element. :/