What results it?
You can open the page : http://www.yanglihao.com/filesUploaded/dragdrop.htm
In pure javascript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.yanglihao.com/filesUploaded/dragdrop.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<SCRIPT type=text/javascript></SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.7600.16385"></HEAD>
<BODY>
<SCRIPT language=JavaScript type=text/javascript>
/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/
//+----------------------specialEffect---------------------------------
var SpecialEffect = function()
{
this.drag = function(elementToDrag, event)
{
var startX = event.clientX, startY = event.clientY;
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
var deltaX = startX - origX, deltaY = startY - origY;
if( document.addEventListener )
{
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if( document.attachEvent )
{
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
elementToDrag.attachEvent("onloseecapture", upHandler);
}
else
{
var oldmovehandler = document.onmousemove;
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}
if ( event.Propagation )
{
event.stopPropagation();
}
else
{
event.cancelBubble = true;
}
if ( event.preventDefault )
{
event.preventDefault();
}
else
{
event.returnValue = false;
}
function moveHandler(e)
{
if( !e )
{
e = window.event;
}
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
if( e.stopPropagation ) e.stopPropagation();
else e.cancelBubble = true;
}
function upHandler(e)
{
if( !e ) e = window.event;
if( document.removEventListener )
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if( document.detachEvent )
{
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
else
{
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}
if( e.stopPropagation ) e.stopPropagation();
else e.cancelBubble = true;
}
}
}
//++---------------------------------------------------------------
var specialEffect = new SpecialEffect();
//**----------------------------------------------------------------
//*------------------------------------------------------------------------
function addEvlement(in_object)
{
alert('addEvlement is invoked');
if( sourceObject != null )
{
sourceObject.style.position = "";
in_object.appendChild(sourceObject);
}
sourceObject=null;
}
function stopDefault(e)
{
// Prevent the default browser action (W3C) 11.
if ( e && e.preventDefault )
e.preventDefault();
// A shortcut for stoping the browser action in IE
else
window.event.returnValue = false;
return false;
}
var sourceObject=null;
</SCRIPT>
<DIV id=a>div one</DIV>
<DIV style="BACKGROUND-COLOR: green; WIDTH: 400px; HEIGHT: 50px" id=tmpContainer
onmouseup=addEvlement(this);></DIV>
<DIV onmousedown=specialEffect.drag(this.parentNode,event);>
<TABLE>
<TBODY>
<TR>
<TH width=60>video</TH>
<TH class=one width=636><A href="http://www.qidian.com/">start</A><A
href="http://www.youku.com/">book</A></TH></TR>
<TR>
<TH width=60>novel</TH>
<TH class=two width=636><A href="http://www.youku.com/">ggg</A><A
href="http://www.xxsy.net/">5555</A> <A
onmousedown="this.style.position='absolute'; sourceObject=this; specialEffect.drag(this,event);"
onclick="return false;" href="http://book.sina.com.cn/">drag me</A> // be
dragged <A href="http://www.xs8.cn/">vv</A></TH></TR>
<TR>
<TH width=60>other</TH>
<TH class=one width=636><A
href="http://www.7k7k.com/">7k7k</A></TH></TR></TBODY></TABLE></DIV></BODY></HTML>