Follow along with the video below to see how to install our site as a web app on your home screen.
Бележка: This feature may not be available in some browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
// start dragging
function startDrag(e){
// determine event object
if(!e){var e=window.event};
// determine target element
var targ=e.target?e.target:e.srcElement;
if(targ.className!='draggable'){return};
// calculate event X,Y coordinates
offsetX=e.clientX;
offsetY=e.clientY;
// assign default values for top and left properties
if(!targ.style.left){targ.style.left='0px'};
if(!targ.style.top){targ.style.top='0px'};
// calculate integer values for top and left properties
coordX=parseInt(targ.style.left);
coordY=parseInt(targ.style.top);
drag=true;
// move div element
document.onmousemove=dragDiv;
}
// continue dragging
function dragDiv(e){
if(!drag){return};
if(!e){var e=window.event};
var targ=e.target?e.target:e.srcElement;
// move div element
targ.style.left=coordX+e.clientX-offsetX+'px';
targ.style.top=coordY+e.clientY-offsetY+'px';
return false;
}
// stop dragging
function stopDrag(){
drag=false;
}
window.onload=function(){
document.onmousedown=startDrag;
document.onmouseup=stopDrag;
}
</script>
<style type="text/css">
.draggable {
position: relative;
font-family: verdana;
font-size: 11px;
width: 250px;
height: 100px;
background-color: #ccc;
border: 1px solid #000;
margin-bottom: 3px;
padding: 3px;
cursor: move;
}
</style>
</head>
<body>
<div class="draggable">#1 This is a dragging DIV element</div>
<div class="draggable">#2 This is a dragging DIV element</div>
</body>
</html>