VPF::эффект перетаскивания объекта

Alx

Дата 11.2.2006, 19:12 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

чё-то не соображу, можно сделать?
ведь, насколько я знаю, нет события на отпускание кнопки мыши?

у меня получилось сделать только так:
click -> объект прилипает к курсору -> mousemove -> двигаем объект -> click -> кладем его

еси мона как в системных приложених, подскажите, плиз!
пасиб)

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

Innuendo

Дата 11.2.2006, 19:45 (ссылка)

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

Загрузка ...

Опытный

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

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

Я когда-то делал див, который можно перетаскивать.
структура такая:
при ведении мыкшой по документа див идёт за курсором.
Но только если переменная флаг положительна. Изначальна она отрицательная... при нажатии на кнопку мыши, она становится положительной, а при отпускании опять отрицательной.
Вот что у меня вышло.
В FireFox, IE6 работает. В Опере не пробовал

Код


<html>
<head>
<style>
.globalred{
                                 background: #F2DDDD;
                                 border: 1px solid #990000;
                                 border-top: 0;
                                 margin: 0px;
                                 padding: 0;
                                 position: absolute;
                             }

                             .globalred h4{
                                 background: #E3C0C0;
                                 
                                 border: 1px solid #990000;
                                 border-left: 0;
                                 border-right: 0;
                                 color: #990000;
                                 font-size: 12px;
                                 font-weight: bold;
                                 margin: 0;
                                 padding: 5px;
                             }

                             .globalred p{
                                 background: transparent;
                                 border: 0;
                                 color: #990000;
                                 margin: 0;
                                 padding: 8px;
                             }

                             .globalred p a:link,
                             .globalred p a:visited,
                             .globalred p a:active{
                                 background: transparent;
                                 text-decoration: underline;
                                 color: #990000;
                             }

                             .globalred p a:hover{
                                 background: transparent;
                                 text-decoration: underline;
                                 color:;
 </style>
<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 - 11.2.2006, 19:53

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

Innuendo

Дата 11.2.2006, 20:13 (ссылка)

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

Загрузка ...

Опытный

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

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

у скрипта выше баг в ИЕ... когда тольок открыли страницу, и наводите на пространство правее текста, то он потом не отпустит.
Это там проблемы в СSS(лучше засунуть внутль h4 спан, и все действия задать ему.. а он чтоб был по ширине и высоте как и h4)
То есть JavaScript работает нормально, если будешь использовать свой css стиль то должно нормально пойти.

Это сообщение отредактировал(а) Innuendo - 11.2.2006, 20:32

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

12345c

Дата 11.2.2006, 21:19 (ссылка)

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

Загрузка ...

Круглый

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

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

Alx: я делал тоже так, но к этому надо отменить событие ondragstart :

Код

function eDrag(e){eval(Ev);e.returnValue=!1;} document.ondragstart=eDrag;

Иначе drag-n-drop понимается как возможность перетащить картинку на другое окно и конфликтует.

ondragstart было задумано не для таскания объектов по окну, а для таскания картинок, файлов и ссылок на окно и из него.

Есть также onDrop, onDragOver, onDragEnter, onDragLeave (ie5+), onDragDrop (Gecko)

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

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

Aliance

Дата 11.2.2006, 22:25 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Вот замечательный пример из моей первой книжке от издательства O'reilly.

Присоединённый файл ( Кол-во скачиваний: 34 )

13_11.rar 31,55 Kb

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Innuendo

Дата 11.2.2006, 22:32 (ссылка)

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

Загрузка ...

Опытный

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

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

Aliance,
у меня скрипт не работает нив ИЕ, ни в ФФ smile

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

Alx

Дата 11.2.2006, 23:00 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

балин!!!!
я всю свою сознательную жизнь думал, что события onmouseup не существует!!!!!
вот в чем проблема... вот ***... слов нет... даже не догадался в ман посмотреть...
щас подкорректирую свой скрипт и выложу smile

12345c,
про drag-n-drop, я знаю, только не понял, зачем отменять ondragstart? ведь мы никаких особых собитий не используем, только стандартные события и задания координат абсолютно позиционированного DIV`а, относительно курсора, не думаю, что должно конфликтовать...

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

12345c

Дата 12.2.2006, 00:50 (ссылка)

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

Загрузка ...

Круглый

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

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

А потому что если попытаешься таким способом тащить рисунок, браузер решит, что ты хочешь его в новом окне посмотреть. Вместе с mousemove инициируется dragstart.

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

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

Alx

Дата 12.2.2006, 01:04 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

вот и мой код посмотрите smile

работает везде, только z-index задается почему-то только в IE...
пример здесь

Код


<script>

function moveObj(e,obj)
{    var _left = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.pageX : e.x;
    var _top = (window.navigator.userAgent.indexOf("Gecko") != -1) ? e.pageY : e.y;

    if (obj.getAttribute("is_moving") == "true")
    {    obj.style.left = _left - parseInt(obj.style.width) / 2;
        obj.style.top = _top - parseInt(obj.style.height) / 2;
    }
}

function takeObj(obj)
{    obj.setAttribute("is_moving","true");
    obj.style.setAttribute("zIndex","1");
}

function putObj(obj)
{    obj.setAttribute("is_moving","false");
    obj.style.setAttribute("zIndex","0");
}

</script>
</head>
<body id="tborder">

<div id="div1" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:purple;z-index:0;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
<div id="div2" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:#E18700;z-index:0;;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
<div id="div3" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:green;z-index:0;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
<div id="div4" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:red;z-index:0;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>
<div id="div5" class="drag_div" style="top:20px;left:20px;width:105px;height:105px;background:#6699cc;z-index:0;" is_moving="false" onmousemove="moveObj(event,this);" onmousedown="takeObj(this);" onmouseup="putObj(this);" onmouseout="putObj(this);">&nbsp;</div>

</body>

Цитата(12345c @ 12.2.2006, 00:50

)

вот терь понял smile

пасиб)

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

Innuendo

Дата 12.2.2006, 14:07 (ссылка)

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

Загрузка ...

Опытный

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

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

ухты.. забавная штука smile

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

12345c

Дата 12.2.2006, 15:38 (ссылка)

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

Загрузка ...

Круглый

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

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

Alx, Они таскаться должны? ничего не просходит. (ie, ff).

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

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

Innuendo

Дата 12.2.2006, 16:45 (ссылка)

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

Загрузка ...

Опытный

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

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

там пару квадратиков...
они тащаться.. можно перетакскивать поверх квадрата, а понизу нельзя smile

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

Alx

Дата 12.2.2006, 18:45 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

12345c,
как это? у меня везде работает... ничего не понимаю...

Цитата(Innuendo @ 12.2.2006, 16:45

)

там пару квадратиков...

не пару квадратиков, а 5 больших, разноцветных прямоугольных равносторонних параллелограмма! smile

Цитата(Innuendo @ 12.2.2006, 16:45

)

можно перетакскивать поверх квадрата, а понизу нельзя

не понял) по какому низу? можно где хочешь, просто на время перетаскивания они выскакивают поверх всех других, а при окончании становятся опять по порядку) но это почему-то только в ИЕ.
видимо, другие браузеры не поддерживают свойство z-index.

Это сообщение отредактировал(а) Alx - 12.2.2006, 18:47

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

Sardar

Дата 12.2.2006, 20:08 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Парни, угадайте сколько готовых решений найдуться если вверху, в поиске задать "drag drop" smile

Xотя это не плохо изобретать колесо по новой во время обучения smile

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

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

12345c

Дата 12.2.2006, 23:55 (ссылка)

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

Загрузка ...

Круглый

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

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

Sardar, штук 5 нашлось разной степени готовности. А в сети ещё штук 5 статей с готовым решением. Ты где-то собирался сделать скрипт для общего пользования, так вот я тоже могу, если публика попросит smile

. Со всеми предусмотрениями, проверенный в работе.

> как это? у меня везде работает... ничего не понимаю...
никак не работает, и разобрался почему - результат получается всегда нецелый, а стили этого не понимают.
Но ладно не целый, он ещё и неправильный. Как можно

obj.style.left = _left - parseInt(obj.style.width) / 2;

? (В left загонять width.)

Для проверки вставь алерт:

Код


    if (obj.getAttribute("is_moving") == "true")
    {    
     alert(_left - parseInt(obj.style.width) / 2)
     obj.style.left = _left - parseInt(obj.style.width) / 2;
        obj.style.top = _top - parseInt(obj.style.height) / 2;
    }

Тут можно ещё гору критики, но легче написать заново.

Innuendo, а как у тебя заработало?

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

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

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