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?

HTML Code:

<!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

Code:

<!DOCTYPE html><!-- HTML 5 supersedes XHTML -->
<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%;"><!-- HTML element to force scrollbars for the page for testing -->
<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:

Code:

$(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. :/

Thread: Drag and Drop JQuery

Thread Tools

Search Thread

Drag and Drop JQuery

Similar Threads

Using a drag and drop script with a drop down menu

Integrating Drag & Drop w/ Drop Down menu

DOM Drag & Drop script - Flash Drag Problem

cant drag and drop

Drag and drop photos from drop down menu

Bookmarks

Bookmarks

Posting Permissions