KidsLovePC Contact Us
  Home   PHP  Graphics ASP  JavaScript   J2EE  HTML  JAVA   Swing   Webtip  Forums  Lyric  Free sheet music  Ringtones

Best books about Javasript

JavaScript Draggable Drop Text Layer

javascript, javascript detect chinese input formYou may drag the following two colored text.

Drag me !

 

Drag me too !

javascript, javascript detect chinese input formHow to do it?

Add the following code to your <head> tag.


<style>

.dragDrop
{
position:absolute;
color:#FFFFFF;
font-family:Arial;
font-size:10pt;
font-weight:bold;
z-index:0;
}
</style>

<script language="JavaScript">
<!--

function TElement(id)
{
this.id=id;
this.elt=(this.id) ? document.getElementById(id) : null;

function getX()
{
return this.elt.offsetLeft;
}
TElement.prototype.getX=getX;

function getY()
{
return this.elt.offsetTop;
}
TElement.prototype.getY=getY;

function setX(x)
{
return this.elt.style.left=x+"px";
}
TElement.prototype.setX=setX;

function setY(y)
{
return this.elt.style.top=y+"px"
}
TElement.prototype.setY=setY;

}

 

function TEvent()
{
this.x = 0;
this.y = 0;

function init(evt)
{
this.evt=(evt) ? evt : window.event; // l'objet événement
if (!this.evt) return;
this.elt=(this.evt.target) ? this.evt.target : this.evt.srcElement; // la source de l'événement

this.id=(this.elt) ? this.elt.id : "";

// Calcul des coordonnées de la souris par rapport au document

if (this.evt.pageX || this.evt.pageY)
{
this.x = this.evt.pageX;
this.y = this.evt.pageY;
}
else if (this.evt.clientX || this.evt.clientY)
{
this.x = this.evt.clientX + document.body.scrollLeft;
this.y = this.evt.clientY + document.body.scrollTop;
}
}
TEvent.prototype.init=init;

function stop()
{
this.evt.cancelBubble = true;
if (this.evt.stopPropagation) this.evt.stopPropagation();
}
TEvent.prototype.stop=stop;
}

 

function TDragObject(id)
{
if (!id) return;
this.base=TElement;

this.base(id);
this.elt.obj=this
this.elt.onmousedown=_startDrag;

function startDrag(evt)
{
this.elt.style.zIndex=1;
this.lastMouseX=evt.x;
this.lastMouseY=evt.y;
evt.dragObject=this;

document.onmousemove=_drag;
document.onmouseup=_stopDrag;

if (this.onStartDrag) this.onStartDrag();
}
TDragObject.prototype.startDrag=startDrag;

function stopDrag(evt)
{
this.elt.style.zIndex=0;
evt.dragObject=null;
document.onmousemove=null;
document.onmouseup=null;

if (this.onDrop) this.onDrop();
}
TDragObject.prototype.stopDrag=stopDrag;

function drag(evt)
{
dX=this.getX()+evt.x-this.lastMouseX;
dY=this.getY()+evt.y-this.lastMouseY;

this.setX(dX);
this.setY(dY);

this.lastMouseX=evt.x;
this.lastMouseY=evt.y;

if (this.onDrag) this.onDrag();

}
TDragObject.prototype.drag=drag;
}
TDragObject.prototype=new TElement();

 

var _event=new TEvent(); // Objet global pour manipuler l'événement en cours

function _startDrag(evt)
{
_event.init(evt);
if (this.obj && this.obj.startDrag)
{
this.obj.startDrag(_event);
}
}

function _stopDrag(evt)
{
if (_event.dragObject) _event.dragObject.stopDrag(_event);
}

function _drag(evt)
{
_event.init(evt);
if (_event.dragObject) _event.dragObject.drag(_event);
return false;
}

function afficherStatus()
{
window.status="Object ["+this.id+"] se trouve en ("+this.getX()+","+this.getY()+")"+
" text =\""+this.elt.innerHTML+"\"";
}

function load()
{
tst=new TDragObject("test");
tst.onDrag=afficherStatus;

tst2=new TDragObject("test2");
tst2.onDrag=afficherStatus;
}

// -->
</script>

 

 

Add onLoad event to <body> tag like <body onload="load()">

 

 

 

Best books about ASP & ASP.Net from Amazon
JavaScript Bible, Fifth Edition (Paperback) JavaScript & DHTML Cookbook (Paperback) JavaScript: The Definitive Guide (Paperback) Beginning JavaScript Second Edition (Paperback) JavaScript: The Complete Reference, Second Edition (Paperback)

 

Printer Inkjet A Z lyricsLearn ChineseHome|PHP|Swing|HTML|JavaScript|ASP|JAVA|Forum|WebTip|Contact Us
Copyright © kidslovepc.com All rights reserved(new). Privacy|Copyright
designed by info@kidslovepc.com

Please help us cover the web site maintenance fee.
barcode scanner Thermal Printer credit card machine bar code printer