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