Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Drag and drop

  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drag and drop

    Hey complete beginner to javascript here so sorry if I'm doing something stupid

    Basically I've tried to follow this guide to make it so that I can move an image on the page.

    I have a style tag in the head

    Code:
    <style type="text/css">.drag{position: relative;}</style>
    I have an image like this:

    Code:
    <img src="logo.png" class="drag" alt="logo" />
    which is obviously in the body

    I copied and pasted the code given in the guide:

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    var _startX = 0;			// mouse starting positions
    var _startY = 0;
    var _offsetX = 0;			// current element offset
    var _offsetY = 0;
    var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
    var _oldZIndex = 0;			// we temporarily increase the z-index during drag
    var _debug = $('debug');	// makes life easier
    
    
    InitDragDrop();
    
    function InitDragDrop()
    {
    	document.onmousedown = OnMouseDown;
    	document.onmouseup = OnMouseUp;
    }
    
    function OnMouseDown(e)
    {
    	// IE is retarded and doesn't pass the event object
    	if (e == null) 
    		e = window.event; 
    	
    	// IE uses srcElement, others use target
    	var target = e.target != null ? e.target : e.srcElement;
    	
    	_debug.innerHTML = target.className == 'drag' 
    		? 'draggable element clicked' 
    		: 'NON-draggable element clicked';
    
    	// for IE, left click == 1
    	// for Firefox, left click == 0
    	if ((e.button == 1 && window.event != null || 
    		e.button == 0) && 
    		target.className == 'drag')
    	{
    		// grab the mouse position
    		_startX = e.clientX;
    		_startY = e.clientY;
    		
    		// grab the clicked element's position
    		_offsetX = ExtractNumber(target.style.left);
    		_offsetY = ExtractNumber(target.style.top);
    		
    		// bring the clicked element to the front while it is being dragged
    		_oldZIndex = target.style.zIndex;
    		target.style.zIndex = 10000;
    		
    		// we need to access the element in OnMouseMove
    		_dragElement = target;
    
    		// tell our code to start moving the element with the mouse
    		document.onmousemove = OnMouseMove;
    		
    		// cancel out any text selections
    		document.body.focus();
    		
    		// prevent text selection in IE
    		document.onselectstart = function () { return false; };
    		// prevent IE from trying to drag an image
    		target.ondragstart = function() { return false; };
    		
    		// prevent text selection (except IE)
    		return false;
    	}
    }
    
    function ExtractNumber(value)
    {
    	var n = parseInt(value);
    	
    	return n == null || isNaN(n) ? 0 : n;
    }
    
    function OnMouseMove(e)
    {
    	if (e == null) 
    		var e = window.event; 
    
    	// this is the actual "drag code"
    	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
    	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
    	
    	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';	
    }
    
    function OnMouseUp(e)
    {
    	if (_dragElement != null)
    	{
    		_dragElement.style.zIndex = _oldZIndex;
    
    		// we're done with these events until the next OnMouseDown
    		document.onmousemove = null;
    		document.onselectstart = null;
    		_dragElement.ondragstart = null;
    
    		// this is how we know we're not dragging
    		_dragElement = null;
    		
    		_debug.innerHTML = 'mouse up';
    	}
    }
    //-->
    	</script>
    I have tried putting the javascript in the head and the body but no matter where I put it, I can't drag and drop the image. What am I doing wrong?

    Thank you for your time

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anybody got any ideas?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,086
    Thanks
    23
    Thanked 593 Times in 592 Posts
    The tutorial fails to mention a few things. Like the js needs to be in the body and that
    <pre id="debug"> </pre> needs to be there. Also notice cursor: move; in the style section, needed to change the cursor.

    I just looked at how the site was coded and this is what I garbed and checked out:
    It does work in FF!
    Code:
    <HTML>
    <HEAD>
    <TITLE>Short Quiz</TITLE>
    	<style type="text/css">
    .drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move;}
    th, td {text-align: left; padding-right: 1em;}
    table {margin: 0 0 0.4em 1.3em; border: 1px solid rgb(240, 240, 240);}
    	</style>
    </HEAD>
    <body>
    
    <h3>Try dragging one of the items below:</h3><hr />
    <div class="drag">Item 1 is &lt;div&gt;</div>
    <div class="drag">Item 2 is &lt;div&gt;</div>
    <img class="drag" src="images/6.png" alt="drag image">
    <pre id="debug"> </pre>
    
    
    <script language="JavaScript" type="text/javascript">
    <!--
    
    // this is simply a shortcut for the eyes and fingers
    function $(id)
    {
    	return document.getElementById(id);
    }
    
    var _startX = 0;			// mouse starting positions
    var _startY = 0;
    var _offsetX = 0;			// current element offset
    var _offsetY = 0;
    var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
    var _oldZIndex = 0;			// we temporarily increase the z-index during drag
    var _debug = $('debug');	// makes life easier
    
    
    InitDragDrop();
    
    function InitDragDrop()
    {
    	document.onmousedown = OnMouseDown;
    	document.onmouseup = OnMouseUp;
    }
    
    function OnMouseDown(e)
    {
    	// IE is retarded and doesn't pass the event object
    	if (e == null)
    		e = window.event;
    
    	// IE uses srcElement, others use target
    	var target = e.target != null ? e.target : e.srcElement;
    
    	_debug.innerHTML = target.className == 'drag'
    		? 'draggable element clicked'
    		: 'NON-draggable element clicked';
    
    	// for IE, left click == 1
    	// for Firefox, left click == 0
    	if ((e.button == 1 && window.event != null ||
    		e.button == 0) &&
    		target.className == 'drag')
    	{
    		// grab the mouse position
    		_startX = e.clientX;
    		_startY = e.clientY;
    
    		// grab the clicked element's position
    		_offsetX = ExtractNumber(target.style.left);
    		_offsetY = ExtractNumber(target.style.top);
    
    		// bring the clicked element to the front while it is being dragged
    		_oldZIndex = target.style.zIndex;
    		target.style.zIndex = 10000;
    
    		// we need to access the element in OnMouseMove
    		_dragElement = target;
    
    		// tell our code to start moving the element with the mouse
    		document.onmousemove = OnMouseMove;
    
    		// cancel out any text selections
    		document.body.focus();
    
    		// prevent text selection in IE
    		document.onselectstart = function () { return false; };
    		// prevent IE from trying to drag an image
    		target.ondragstart = function() { return false; };
    
    		// prevent text selection (except IE)
    		return false;
    	}
    }
    
    function ExtractNumber(value)
    {
    	var n = parseInt(value);
    
    	return n == null || isNaN(n) ? 0 : n;
    }
    
    function OnMouseMove(e)
    {
    	if (e == null)
    		var e = window.event;
    
    	// this is the actual "drag code"
    	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
    	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
    
    	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
    }
    
    function OnMouseUp(e)
    {
    	if (_dragElement != null)
    	{
    		_dragElement.style.zIndex = _oldZIndex;
    
    		// we're done with these events until the next OnMouseDown
    		document.onmousemove = null;
    		document.onselectstart = null;
    		_dragElement.ondragstart = null;
    
    		// this is how we know we're not dragging
    		_dragElement = null;
    
    		_debug.innerHTML = 'mouse up';
    	}
    }
    //-->
    	</script>
    </BODY>
    </HTML>

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    The tutorial fails to mention a few things. Like the js needs to be in the body and that
    <pre id="debug"> </pre> needs to be there. Also notice cursor: move; in the style section, needed to change the cursor.

    I just looked at how the site was coded and this is what I garbed and checked out:
    It does work in FF!
    Thank you very very much! I did have a look at the page source but I managed to miss the pre tag, somehow Thank you, again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •