|
Drag and Drog
#38640657
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
|
|
|
Areostar,
http://javascript.ru/ui/draganddrop#vizualnoe-peremeshchenie-elementa
Простой вариант 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position:absolute; padding:5px; top:50px; left:70px; border:1px solid #808080;" onmousedown="dragOBJ(this,event); return false;">Перемещаемый DIV</div>
</body>
<script language="JavaScript">
function $(v) {
return(document.getElementById(v));
}
function agent(v) {
return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0));
}
function xy(e,v) {
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX));
}
function dragOBJ(d,e) {
function drag(e) {
if(!stop) {
d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px');
}
}
var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
document.onmousemove=drag;
document.onmouseup=function() {
stop=1; document.onmousemove=''; document.onmouseup='';
};
}
</script>
</html>
Посложнее. Можно таскать за заголовок, изменять размер за уголок. 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Окна как в Windows</title>
<style>
.DivWnd {
position:absolute;
min-width:150px;
min-height:55px;
font-family:Tahoma,'MS Sans Serif','sans-serif';
font-size:10pt;
background:#CED9E7;
border-radius:4px;
box-shadow:0 0 0 1px #ECF2FB, 0 0 0 2px #A2B1C5, 0 0 0 3px #D8E0ED, 0 0 0 4px #DBE3F1;
color:#04468C;
overflow:hidden;
}
.DivWnd .DivHeader {
padding-left:6px;
font:700 8pt/20px Tahoma,'MS Sans Serif','sans-serif';
cursor:move;
}
.DivWnd .DivContent {
position:absolute;
left:3px;
right:3px;
top:23px;
bottom:3px;
background:#DFE8F6;
border:1px solid #99BBE8;
color:#000;
text-align:center;
}
.DivWnd .ResizeCorner {
position:absolute;
bottom:-2px;
right:-2px;
width:15px;
height:15px;
cursor:se-resize;
}
.DivWnd .cmdCloseWnd {
position:absolute;
top:3px;
right:3px;
width:15px;
height:15px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAo0lEQVR42mNggIIZu57/JxYzIAOQwL9//4jGcANI1YhiAEzzuz8QPG/jIzgbGSOLY2h++QOiQNWpH0yD+DCMLo6h+elXCEZWiI0PwhiaH3xCYGQNMBpZHkPzuce/UDCyRnQ5DM0Xnv6GY2w2I8tjaL78/C8YI2vAxgdhDM1XX6L6FcSHYXRxDM03XkMwSAGMjYyRxbEmEmya0DFKIqEobVOSqwDKyew+DCUMZQAAAABJRU5ErkJggg==);
cursor:pointer;
}
#Form1 {
top:200px;
left:500px;
min-width:270px;
min-height:200px;
}
</style>
</head>
<body onload="SetEvents()">
<div class="DivWnd" id="Form1">
<div class="DivHeader">Еще одно окно <div class="cmdCloseWnd"></div> </div>
<div class="DivContent">
<br>
Весь секрет адамантия в том, что если<br>удалось получить этот необыкновенный<br>сплав в жидкой форме, его нужно<br> хранить... подогретым.
Иначе он<br>затвердеет... И его не разрушишь...
</div> <!-- DivContent -->
<div class="ResizeCorner"></div>
</div> <!-- DivWnd -->
<div class="DivWnd">
<div class="DivHeader">Перемещаемый DIV <div class="cmdCloseWnd"></div> </div>
<div class="DivContent">Можно растянуть за уголок</div>
<div class="ResizeCorner"></div>
</div>
<script>
function gid (idx) {return document.getElementById(idx);}
function GetPosEl(el){
var left = 0
var top = 0
while (el.offsetParent){
left += el.offsetLeft
top += el.offsetTop
el = el.offsetParent
}
left += el.offsetLeft
top += el.offsetTop
return {x:left, y:top}
}
function GetMouseXY(event) {// Функция для определения координат указателя мыши
var x = y = 0;
if (document.attachEvent != null) {// Internet Explorer & Opera
x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
} else if (!document.attachEvent && document.addEventListener) {// Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
} else {
// Do nothing
}
return {x:x, y:y};
}
function MoveForm(e) {
e = e || window.event;
var el = (e.target || e.srcElement).parentNode;
function drag(e) {
if (!stop) {el.style.top = GetMouseXY(e).y + oY - eY + 'px'; el.style.left = GetMouseXY(e).x + oX - eX + 'px';}
}
var oX=GetPosEl(el).x, oY=GetPosEl(el).y, eX=GetMouseXY(e).x, eY=GetMouseXY(e).y, stop = false;
document.onmousemove = drag;
document.ondragstart = function() {return false}
document.body.onselectstart = function() {return false}
document.onmouseup=function() {
stop = true; document.onmousemove = null; document.onmouseup = null; document.ondragstart = null; document.body.onselectstart = null;
}
return false
}
function ResizeForm(e) {
e = e || window.event;
var el = (e.target || e.srcElement).parentNode;
function drag(e) {
if (!stop) {el.style.height = GetMouseXY(e).y - oH + 'px'; el.style.width = GetMouseXY(e).x - oW + 'px';}
}
var oH = GetMouseXY(e).y - el.offsetHeight, oW = GetMouseXY(e).x - el.offsetWidth, stop = false;
document.onmousemove = drag;
document.ondragstart = function() {return false}
document.body.onselectstart = function() {return false}
document.onmouseup=function() {
stop = true; document.onmousemove = null; document.onmouseup = null; document.ondragstart = null; document.body.onselectstart = null;
}
return false
}
function CloseForm(e) {
e = e || window.event;
var el = (e.target || e.srcElement).parentNode.parentNode;
el.style.display = 'none';
}
function SetEvents() {
var i = 0;
var el = document.getElementsByClassName('DivHeader');
var cnt = el.length;
for (i=0; i<cnt; i++) {
el[i].onmousedown = MoveForm;
}
el = document.getElementsByClassName('ResizeCorner');
cnt = el.length;
for (i=0; i<cnt; i++) {
el[i].onmousedown = ResizeForm;
}
el = document.getElementsByClassName('cmdCloseWnd');
cnt = el.length;
for (i=0; i<cnt; i++) {
el[i].onclick = CloseForm;
}
}
</script>
</body>
</html>
|
|
|
