...

View Full Version : Drag and drop



raza74
09-16-2011, 07:51 PM
Hey complete beginner to javascript here so sorry if I'm doing something stupid :o

Basically I've tried to follow this guide (http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx) to make it so that I can move an image on the page.

I have a style tag in the head


<style type="text/css">.drag{position: relative;}</style>

I have an image like this:


<img src="logo.png" class="drag" alt="logo" />

which is obviously in the body

I copied and pasted the code given in the guide:


<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? :confused:

Thank you for your time :)

raza74
09-19-2011, 05:25 PM
Anybody got any ideas? :o

sunfighter
09-20-2011, 02:05 PM
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!

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

raza74
09-20-2011, 06:02 PM
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! :D :D I did have a look at the page source but I managed to miss the pre tag, somehow :o Thank you, again! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum