VPF::Плавающий див - Форум программистов

Innuendo

Дата 13.1.2006, 12:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

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

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

Код


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

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

Это сообщение отредактировал(а) Innuendo - 13.1.2006, 12:34

--------------------

Innuendo

Дата 13.1.2006, 13:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

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

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 4
Всего: 56

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

Код

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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

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

--------------------

Innuendo

Дата 13.1.2006, 15:00 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

Наконец

Работает!

Код


<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:15

--------------------

Innuendo

Дата 13.1.2006, 15:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

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

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

--------------------

12345c

Дата 13.1.2006, 20:48 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Запретить onselectstart.

Код


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

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Innuendo

Дата 13.1.2006, 22:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

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

--------------------

Innuendo

Дата 14.1.2006, 01:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

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

--------------------

12345c

Дата 16.1.2006, 18:31 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

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

Код


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

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

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Innuendo

Дата 17.1.2006, 20:06 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

спасибо

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »