<html>
<head>
<title>Javascript</title>
<style>
body{
font-family: Arial;
}
.unselect{
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select{
-moz-user-select: all;
-o-user-select:all;
-khtml-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
user-select: all;
}
#second, #text{
position: absolute;
z-index: 20;
width: 200px;
}
#first{
background-color:red;
z-index: 20;
position: relative;
cursor: move;
font-size: 15px;
width: 200px;
}
#second{
cursor: move;
background-color:green;
z-index: 19;
}
</style>
</head>
<script type='text/javascript'>
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
var xmlHttp = getXmlHttp();
var object = null;
var posX=0;
var posY=0;
var picked=false;
var IDofIT;
function initPage(){
document.onmousemove=moveIt;
document.onmouseup=dropIt;
}
function pick(objectID){
IDofIT=objectID;
object = document.getElementById(objectID);
evt = window.event;
posX=evt.clientX - object.offsetLeft;
posY=evt.clientY - object.offsetTop;
picked=true;
document.body.className='unselect';
object.className='unselect';
}
function moveIt(){
if(object && picked == true){
document.body.className='unselect';
object.className='unselect';
posX=evt.clientX - object.offsetLeft;
posY=evt.clientY - object.offsetTop;
evt = window.event;
if(object.offsetLeft+object.offsetWidth<=window.innerWidth && object.offsetLeft>=0){object.style.left=evt.clientX - posX + 'px';}
if(object.offsetTop+object.offsetHeight<=window.innerHeight && object.offsetTop>=0){object.style.top=evt.clientY - posY + 'px';}
}
}
function dropIt(){
if(object && picked == true){
document.body.className='other';
object.className='other';
if(object.offsetLeft+object.offsetWidth>=window.innerWidth){object.style.left=window.innerWidth-object.offsetWidth-1 + 'px';}
if(object.offsetTop+object.offsetHeight>=window.innerHeight){object.style.top=window.innerHeight-object.offsetHeight-1 + 'px';}
if(object.offsetLeft<=0){object.style.left="1px"}
if(object.offsetTop<=0){object.style.top="1px"}
var send_post="object=" + IDofIT + "&hx=" + object.style.left + "&vy=" + object.style.top;
xmlHttp.open("POST", "save_positions.php", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", send_post.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(send_post);
object=null;
picked=false;}
}
</script>
<body onload="initPage()">
<div id='text' class='select'>
<div onMouseDown='pick("text");' id='first'>за это можно двигать</div>
А здесь могут быть любые элементы, ссылки, кнопки и всё в этом духе)
</div>
<div onMouseDown='pick("second");' id='second'>2</div>
<script type='text/javascript'>
<?php
mysql_connect('mysql.hostinger.com.ua', 'u952822722_dazar', '951159') or die ("Не могу создать соединение"); $query="SELECT id, object, vy, hx FROM positions";
$object=($row['object']);
$hx=($row['hx']);
$vy=($row['vy']);
echo "document.getElementById('$object').style.left=$hx + 'px';";
echo "document.getElementById('$object').style.top=$vy + 'px';";
}
echo "</script>";
?>
</body>
</html>