Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature may not be available in some browsers.
<html>
<head>
<title>Drag and Drop</title>
</head>
<script language="javascript">
var DragEl, InitLeft, InitTop, PrevBorder;
var DragGrain = 1;
var DragSynch = false;
var intLeft = 10;
var intTop = 10;
if (document.all){
document.onmousedown = DragStart;
document.onmouseup = DragEnd;
document.onmousemove = DoDrag;
}
function DragStart()
{
el = event.srcElement;
if ( el.className == "dndWin" ) {
DragEl=el;
DragGrain=1;
while (DragEl.tagName != "DIV") DragEl = DragEl.parentElement;
InitLeft=event.clientX-DragEl.style.pixelLeft;
InitTop=event.clientY-DragEl.style.pixelTop;
DragSynch = false;
el.style.cursor = "move";
}
}
function DragEnd()
{
if ( DragEl ) {
DragEl = null;
el.style.cursor = "default";
}
}
function DoDrag(){
if(DragEl){
if ( DragSynch ) {
var newX = event.clientX;
var newY = event.clientY;
}
else {
var newX = event.clientX-InitLeft;
var newY = event.clientY-InitTop;
}
if ( (newX % DragGrain) == 0 )
DragEl.style.pixelLeft=newX;
if ( (newY % DragGrain) == 0 )
DragEl.style.pixelTop=newY;
return false;
}
}
</script>
<body bgcolor="#cccccc">
<center>
<div id="divDnD" position:absolute;left:550;top:100;">
<input type=text name="txtDnD" class="dndWin">
</div>
</center>
</body>
</html>