Jump to content

move image within a div or certain limited area when mousedown

ted_chou12

By ted_chou12
in Javascript Help

 Share

Recommended Posts

ted_chou12 Advanced Member

ted_chou12

Posted
Posted

Hi, I found this code from a website, the point that I am trying to make here is to drag the image within a certain div, for example a 300 x 500px box, and the image can not be dragged outside this box. The current thing that this script allows me to do is to drag it all over the page, but not within a box that is limited to size:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- saved from url=(0070)http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx --><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;}</style>	<div id="ttt" width="300px" height="500px">	<img class="drag" src="./JavaScript Drag and Drop Tutorial_files/drag_image.png" alt="drag image" style="left: 469px; top: 36px; ">	</div>	<pre id="debug">NON-draggable element clicked</pre><script language="JavaScript" type="text/javascript"><!--// this is simply a shortcut for the eyes and fingersfunction $(id){return document.getElementById(id);}var _startX = 0;			// mouse starting positionsvar _startY = 0;var _offsetX = 0;			// current element offsetvar _offsetY = 0;var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMovevar _oldZIndex = 0;			// we temporarily increase the z-index during dragvar _debug = $('debug');	// makes life easierInitDragDrop();function InitDragDrop(){document.onmousedown = OnMouseDown;document.onmouseup = OnMouseUp;}function OnMouseDown(e){// IE is retarded and doesn't pass the event objectif (e == null) 	e = window.event; // IE uses srcElement, others use targetvar 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 == 0if ((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>

 

Thanks,

Ted

squiblo Advanced Member

squiblo

Posted
Posted

Like this?....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0070)http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx -->



<style type="text/css">
.drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 5px; cursor: move; height:30px; width:50px}
</style>


	<div id="ttt" style="border:1px solid red;width:300px;height:500px">
	<img class="drag" src="./JavaScript Drag and Drop Tutorial_files/drag_image.png" alt="drag image">
	</div>
	<pre id="debug">NON-draggable element clicked</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; 

	if((_offsetX + e.clientX - _startX <= 300 - 60)&&(_offsetX + e.clientX - _startX >= 0))
	{
		if((_offsetY + e.clientY - _startY <= 500 - 40)&&(_offsetY + e.clientY - _startY >= 0))
			{
// 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 months later...
pradeepfilcosys Newbie

pradeepfilcosys

Posted
Posted

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- saved from url=(0070)http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx -->

 

 

 

<style type="text/css">

.drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 5px; cursor: move; height:30px; width:50px}

</style>

 

 

<div id="ttt" style="border:1px solid red;width:300px;height:500px">

<img class="drag" src="./JavaScript Drag and Drop Tutorial_files/drag_image.png" alt="drag image">

</div>

<pre id="debug">NON-draggable element clicked</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;

 

if((_offsetX + e.clientX - _startX <= 300 - 60)&&(_offsetX + e.clientX - _startX >= 0))

{

if((_offsetY + e.clientY - _startY <= 500 - 40)&&(_offsetY + e.clientY - _startY >= 0))

{

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

 

 

Hi,

 

        I have used this code,and this is very useful to me,

 

Scenario,

 

using the above code,we can drag an image with in a limited area,

 

my problem was,

 

am using an ajax concept also,when clicking an thumbnail image 1  larger image of 1 will be displayed if i click thumb 2 then large image thumb2 will be shown.

 

this large images are considered an background image, then i will drag the image above the background image,here everything works fine.

 

But my problem was suppose when i drag the draggable image above the background image,

 

draggable image dragged,

 

what i need is draggable image also needs to be dragged into the background image similarly there should be an duplicate or copy of the image needs to be present .please help me out here.

 

Thanks,

Pradeep

 

 

 

 

 

 

 

 

 

 

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.