|
|
|
новичок
участник
Last Login: 14.03.2007 16:19
Сообщ.: 6,
Visits: 14
|
|
Цель: реализовать нормальное перемещение div с помощью мыши (имитация перетаскивания обычного окна)
Моя Реализация:
-------------Div который нужно двигать-----------------------------------------------------------
div ...
дальше идёт это
....
document.getElementById("PostBox").onmousemove = PostMouseMove;
document.onmouseup = PostMouseUp;
document.getElementById("PostBox").onmousedown = PostMouseDown;
-------------------------------------------------------------------------------------------------
var flag_drop=0;
var mX=0;
var mY=0;
Left=200;
Top=100;
var dx=7;
var dy=5;
var width,height;
-------------------------------------------------------------------------------------------------
if (self.innerHeight) // all except Explorer
{
width = self.innerWidth;
height = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
width = document.body.clientWidth;
height = document.body.clientHeight;
}
function PostMouseDown(e)
{
flag_drop=1;
if (typeof event != "undefined")
{
mX = window.event.clientX + document.body.scrollLeft;
mY = window.event.clientY + document.body.scrollTop;
}
else
{
mX=e.pageX;
mY=e.pageY;
}
}
function PostMouseUp(e)
{
flag_drop=0;
}
function PostMouseMove(e)
{
if (flag_drop)
{
if (typeof event != "undefined")
{
//for IE ещё не написано..
}
else
{
var nX=e.pageX;
var nY=e.pageY;
var newLeft,newTop;
dx=nX-mX;
dy=nY-mY;
if (nX-mX>0){newLeft=Left+dx;}
if (nX-mX<0){newLeft=Left+dx;}
if (nY-mY<0){newTop=Top+dy;}
if (nY-mY>0){newTop=Top+dy;}
if (условия для не выхода за границу окна)
{
if (nX-mX>0){document.getElementById("PostShadow").style.left =Left+dx+"px";Left=Left+dx;}
if (nX-mX<0){document.getElementById("PostShadow").style.left =Left+dx+"px";Left=Left+dx;}
mX=nX;
}
if (условия для не выхода за границу окна)
{
if (nY-mY<0){document.getElementById("PostShadow").style.top =Top+dy+"px";Top=Top+dy;}
if (nY-mY>0){document.getElementById("PostShadow").style.top =Top+dy+"px";Top=Top+dy;}
mY=nY;
}
}
}
}
Всё это двигается довольно ужасно.. (медленно и рывками..перерисовывается постоянно..)
Кто знает в чём проблема.. или как реализовать по-другому?
Спасибо!
|
|
|
|
|
Supreme Being
участник
Last Login: 29.05.2008 20:04
Сообщ.: 269,
Visits: 2 381
|
|
| Вот тебе простейший пример перемещение div'a (написаный под EI): <html>
<head>
<title> </title>
<script>
var cur="";
var d=document
function down_action()
{ if (window.event.srcElement.tagName=="DIV")
{ cur=window.event.srcElement.id;
d.all[cur].style.left=window.event.clientX
d.all[cur].style.top=window.event.clientY
}
}
function up_action() { cur="";}
function move_action() {
if (cur!="")
{
d.all[cur].style.left=window.event.clientX
d.all[cur].style.top=window.event.clientY
}
event.canselBubble=true;
event.returnValue=false;
}
</script>
</HEAD>
<body onmousedown='down_action()' onmousemove='move_action()' onmouseup='up_action()'>
<div id=p1 style="position:absolute;top:100; left:100;cursor:hand;">текст1</div>
<div id=p2 style="position:absolute;top:100; left:250;cursor:hand;">текст2</div>
</body>
</HTML>
----------------------------------
Я безработный...
Возьмите меня на работу. =)
|
|
|
|
|
новичок
участник
Last Login: 14.03.2007 16:19
Сообщ.: 6,
Visits: 14
|
|
Спасибо.. Эта програма работает в простейшем случае..(текст двигается)
Но попробовал использовать это у себя для большого видимого div, то во-первых он в приведённом варианте почему-то не работает, а в моём..из-за перерисовки, двигается не очень хорошо.
|
|
|
|
|
Supreme Being
участник
Last Login: 29.05.2008 20:04
Сообщ.: 269,
Visits: 2 381
|
|
m31 (13.03.2007)
Спасибо.. Эта програма работает в простейшем случае..(текст двигается)
Но попробовал использовать это у себя для большого видимого div, то во-первых он в приведённом варианте почему-то не работает, а в моём..из-за перерисовки, двигается не очень хорошо.Вот подобие того что ты пытаешься написать... Но работает только в Internet Explorer 6 <HTML>
<HEAD>
<TITLE> Пример фреймов </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
var cur="";
var d=document
function down_action(){
if ((window.event.srcElement.tagName=="TD")&&(window.event.srcElement.id=="p1")) {
cur="p3";
d.all[cur].style.left=window.event.clientX
d.all[cur].style.top=window.event.clientY
}
else {
cur="";}
}
function up_action() { cur="";}
function move_action() {
if (cur!="")
{
d.all[cur].style.left=window.event.clientX
d.all[cur].style.top=window.event.clientY
}
event.canselBubble=true;
event.returnValue=false;
} function A() {
p3.style.display="none"
}
</script>
</HEAD>
<body onmousedown="down_action()" onmousemove="move_action();" onmouseup="up_action()"> <h1 id="vvv" style="position:absolute;top:10;left:10">Какой-то текст</h1><br>
<br>
<table id="p3" border=0 cellspacing=0 cellpadding=0 style="position:absolute;top:100;left:100;"><br>
<tr><td id="p1" width=300pt height=10pt bgcolor=blue>ffffffffff<td bgcolor=blue style="color:white;cursor:hand;" onClick="A()">X<br>
<tr width=300pt height=200pt><th colspan=2 bgcolor=gold id="kkk"><br>
<div id="mdiv" style="overflow: scroll;width:311pt;height:210pt;"><br>
<br>
To set up a web application, you must configure your system, define a Dreamweaver site, and connect to a database. This section provides checklists for each task. The procedures are described in the rest of the chapter. <br>
<br>
Configure your system: <br>
Make sure you have a web server.<br>
Install the Microsoft .NET Framework.<br>
Create a root folder. <br>
Define a Dreamweaver site: <br>
Copy the sample files to a folder on your hard disk.<br>
Define the folder as a Dreamweaver local folder.<br>
Define a web server folder as a Dreamweaver remote folder.<br>
Specify a folder to process dynamic pages.<br>
Upload the sample files to the web server.<br>
Connect to the database (local configuration): <br>
Create the connection in Dreamweaver. <br>
<br>
Connect to the database (remote server configuration): <br>
Copy the database to the remote computer and create the connection in Dreamweaver. <br>
<br>
</div>
<tr><td>
</table> </body>
</HTML>
----------------------------------
Я безработный...
Возьмите меня на работу. =)
|
|
|
|
|
новичок
участник
Last Login: 14.03.2007 16:19
Сообщ.: 6,
Visits: 14
|
|
Спасибо огромное!!!!
Я уже доточил свой вариант.. вообщем всё работает.. проблема оказалась в том, что я в этот див. загнал большой текстовый редактор фцк эдитор. Вообщем работает в мозиле и в ие.
Осталась покаместь проблема с селектами и раздвижением дивов.
|
|
|
|