передвижение объекта в окне браузера
Доброго времени суток!
не буду многословен,скажу сразу изучаю javascript не так давно как хотелось бы,но уже задумался такой вещью как передвижение объектов.поэтому решил попробовать начать с простого,начать то начал,но закончить не получается,ничего не работает!Может быть кто-нибудь сможет помочь и найти ошибку в моем коде! Заранее спасибо!
<html>
<head>
<title>ДвигОбъект</title>
</head>
<body>
<div style="width:200px; height:200px; background:#345; position:absolute" onMouseDown="move(this)"></div>
<script language="javascript">
function move(div){
document.onMouseDown=function(){return false}
div.style.cursor='move';
document.onmousemove=function(e){
x=e.pageX;
y=e.pageY;
left=div.offsetleft;
top=div.offsetTop;
left=x-left;
top=y-top;
document.onmousemove=function(e){
x=e.pageX;
y=e.pageY;
div.style.top=y-top+'px';
div.style.left=x-left+'px';
}
}
document.onmouseup=function(){
div.style.cursor='auto';
document.onmousedown=function(){}
document.onmousemove=function(){}
}
}
</script>
</body>
</html>
|
|
Спасибо,постараюсь разобраться!
|
Nicki-rurg,
пара советов: во-первых,сразу форматируй свой код изначально, чтоб потом не переучиваться во-вторых в JS все имена обработчиков событий пишутся строчными буквами это я к 10 строке кода |
разбирался ,разбирался)добился только того,что стало передвигаться по вертикали)уже не знаю что делать с горизонталью)хотел бы получить помощь от вас))
|
Цитата:
|
а можешь jQuery подключить, там так уже все готово, просто надо вызвать функцию draggable - http://docs.jquery.com/UI/Draggable тут всё описано
|
Цитата:
|
не сложно, просто зачем изобретать велосипед, могу дать свой скрипт без jQuery
|
Чтобы разобраться в чем-то. Вполне себе причина. И да, в учебнике все это есть)
|
Цитата:
|
А можешь свой пример скинуть,посмотреть)
|
Вот мой рабочий вариант, проверял в опере и хроме. Думаю тебе придётся его доработать.
<div style="width:200px; height:500px; background:#000; position:fixed"><div onmousedown="Drag(this)" style="width:200px; height:50px; cursor:move; background:red"></div></div>
<script>
var DragZ = 100;
function Drag(a)
{
var b = 1, c = a.parentNode.style, e = this, f = 1, g, h;
DragZ++;
c.zIndex = DragZ;
a.onmousemove = function()
{
if(b)
{
if(f)
{
g = e.event.offsetX;
h = e.event.offsetY;
f = 0;
}
c.marginLeft = e.event.clientX-g;
c.marginTop = e.event.clientY-h;
}
}
window.onmouseup = function()
{
b = 0;
}
}
</script>
|
Спасибо)все классно)но все таки хотелось бы понять почему мой вариант не работает)
|
Nicki-rurg, у вас в коде ошибка div.offsetleft, "Left" с маленькой буквы. Исправленный ваш код:
<div style="width:200px; height:200px; background:#345; position:absolute" onMouseDown="move(event, this)"></div>
<script language="javascript">
function move(e,div){
document.onMouseDown = function(){return false}
div.style.cursor = 'move';
var x = e.pageX || e.clientX ;
var y = e.pageY || e.clientY;
var left = div.offsetLeft;
var top = div.offsetTop;
left = x - left;
top = y - top;
document.onmousemove = function(e){
x = e.pageX || e.clientX;
y = e.pageY || e.clientY;
div.style.top = y - top+'px';
div.style.left = x - left+'px';
}
document.onmouseup = function(){
div.style.cursor = 'auto';
document.onmousedown = function(){}
document.onmousemove = function(){}
}
}
</script>
|
если я не ошибаюсь например в Опере не работает event.pageX
там event.clientX
if(e.pageX){x=e.pageX;y=e.pageY}
else if(e.clientX){x=e.clientX;y=e.clientY}
|
bushstas, добавить var x = e.clientX || e.pageX. Добавил в код.
|
| Часовой пояс GMT +3, время: 05:06. |