Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Плавающий див

Автор: Innuendo 13.1.2006, 12:24

Нужно сделать див... в форме окошка, с заголовком и телом.
Нажимая на заголовок, можно передвигать его...
я примерно представляю как, но никак не получается...

как получить top и left какого-то дива?
вот пробовал так (алерт для проверки):

Код


var x= document.getElementById('mydiv').style.left
alert(x);

и алерт вылез пустой smile

Автор: Innuendo 13.1.2006, 13:12

Вот что получается:

Код


<html>
<head>
<script type="text/javascript">
<!--
flag=false;
function moveD(e){
if (flag){
var xPos =  e.clientX;
var yPos = e.clientY;
var div = document.getElementById('mydiv')
div.style.top = yPos-5;
div.style.left = xPos-5;
}
}
function flaG(x){
flag = x ? true: false
}

//-->
</script>
</head>
<body onmousemove="moveD(event)">
<div id="mydiv" class="reddiv" style="top: 10; left: 10">
<h4 onmousedown="flaG(1)" onmouseup="flaG(0)"> Сюда нажать и Тянуть</h4>
<p id= "p">а это просто текст</p>
</div>
</body>
</html>

В файрфоксе почти всё работает, он тащит.. Но вот угол дива перекидывается на курсор, а хотелось бы, чтоб за какое место пользователь взял этот заголовок, за то и потащил - ну как обычно то есть тащится.
а в эксплорере проблемы с mouseup - не отпускает див когда мышку отжимаю smile

навернякак это можно как-то обойти smile

Автор: Illuminaty 13.1.2006, 13:46

Узнать положение блока можно с помощью этой функции:

Код

function getElementPosition (elemId)
{
  var offsetTrail = document.getElementById(elemId);
  var offsetLeft = 0;
  var offsetTop = 0;
  while (offsetTrail) {
    offsetLeft += offsetTrail.offsetLeft;
    offsetTop += offsetTrail.offsetTop;
    offsetTrail = offsetTrail.offsetParent;
  }
  return {left:offsetLeft, top:offsetTop};
}

Удачи!

Автор: Innuendo 13.1.2006, 14:45

спасибо
я положение блока то узнал.. но не особо получается всё равно, чтоб началось тянуться именно оттуда где кликнули
но щас попробую так: при клике сохранить координаты мыши, а при муве их отнимать..
и разница координат мыши должна быть разницей координат дива по идее

Автор: Innuendo 13.1.2006, 15:00

Наконец

Работает!

Код


<html>
<head>

<script type="text/javascript">
<!--
var flag=false;
var mX, mY, divX, divY
function moveD(e){
var xPos =  e.clientX;
var yPos = e.clientY;
var div = document.getElementById('mydiv')
var rY = yPos - mY;
var rX = xPos - mX;
if (flag){
div.style.top = divY + rY;
div.style.left = divX + rX;
}
}
function flagon(e){
flag=true;
mX = e.clientX;
mY = e.clientY;
divX = document.getElementById("mydiv").offsetLeft
divY = document.getElementById("mydiv").offsetTop
}
function flagof(){
flag=false;
}

//-->
</script>
</head>
<body onmousemove="moveD(event)">
<div id="mydiv" class="globalred" style="top: 10; left: 10">
<h4 onmousedown="flagon(event)" onmouseup="flagof()" style="cursor:pointer"> Сюда нажать и Тянуть</h4>
<P> НАКОНЕЦ РАБОТАЕТ </p>
</div>
</body>
</html>

Автор: Innuendo 13.1.2006, 15:19

Вот можно протестить, тока вот на ИЕ вроде глючит

и как сделать чтоб выделение у этого <h4> было запрещено?

Автор: 12345c 13.1.2006, 20:48

Запретить onselectstart.

Код


document.onselectstart=function(e){if(!e)e=event;
     всякие условия, где не надо запрещать)return;
e.returnValue=!1;
}

Автор: Innuendo 13.1.2006, 22:31

12345c
Извини, но я не совсем понял твой код...
что надо доредактировать?

Автор: Innuendo 14.1.2006, 01:25

помогите плз.. в ИЕ не останавливает движение... чё-то с onmouseup smile

Автор: 12345c 16.1.2006, 18:31

Прямо так вставляешь:

Код


document.onselectstart=function(e){if(!e)e=event;
e.returnValue=!1;
}

а если надо где-то разрешать селект (поля ввода), те области исключаешь из запрета возвратом e.returnValue=!0; или простым return из функции document.onselectstart.

Автор: Innuendo 17.1.2006, 20:06

спасибо