Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Перетаскиваемое окно, скрипт с сайта,но для своего окна(не ра) 
:(
    Опции темы
Valeria
Дата 12.1.2007, 12:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
нашла на вашем сайте много таких тем, но все же никак не сделать.
есть див - окошко,которое надо перетаскивать
Код

<div id="addNewFeed"  onmousedown="mousedown(event)" onmousemove = "mousemove(event)" onmouseup = "mouseup()">


скрипт
Код

var obj;
            var mouseDown = 0;
            d=document;
            FF=!d.all;
            var posY,posX; 

            function mousedown(e) {
            if(FF)e.preventDefault();                       
            obj =document.getElementById('addNewFeed');
            posY=(FF?e.pageY:event.y+d.body.scrollTop)-parseInt(obj.style.top);
            posX=(FF?e.pageX:event.x+d.body.scrollLeft)-parseInt(obj.style.left);    
            mouseDown=obj;
            }

            function mouseup() {
            mouseDown=0;            
            obj = null;
            }
            function mousemove(e) {
            if (obj){
            e = e || window.event;
            mouseDown.style.top=(FF?e.pageY:event.y+d.body.scrollTop)-posY;
            mouseDown.style.left=(FF?e.pageX:event.x+d.body.scrollLeft)-posX;
}
}



вроде все просто,только не работает!
PM MAIL ICQ   Вверх
12345c
Дата 12.1.2007, 14:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

Репутация: 57
Всего: 101
Что-то знакомое. (И ошибки те же smile )
Таскаемые слои есть на страницах http://javascript.ahoru/example/JsPrimeryCode-56.htm
и http://javascript.aho.ru/subs/subs020xmp.shtml (сложнее). Да и этот пример будет работать, если задать изначальный стиль для obj.style.top, left, а то там NaN выходит. Ошибки тут ещё в недописывании +'px' в конце для стилей - не будет в FF работать.
PM WWW   Вверх
Valeria
Дата 12.1.2007, 14:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
ну,в FF мне слава богу и не надо чтоб работало!
я вообще все убрала с ним!
 слои я эти видела,но вот я из них и пытаюсь сделать себе скрипт.
а стиль изначальный я задала, у меня его не было, только все равно не работает. smile 
PM MAIL ICQ   Вверх
12345c
Дата 12.1.2007, 15:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

Репутация: 57
Всего: 101
Ладно, придётся написать: smile
Код
<div id="addNewFeed"  onmousedown="mousedown(event)" onmousemove = "mousemove(event)" onmouseup = "mouseup()"
  style="top:0;left:0;position:absolute;padding:12px;border:1px solid">
  скрипт код Javascript 
</div>
<script>
var obj;
var mouseDown = 0;
d=document;
FF=!d.all;
var posY,posX; 

function mousedown(e) {
  if(FF)e.preventDefault();                       
  obj =document.getElementById('addNewFeed');
  posY=(FF?e.pageY:event.y+d.body.scrollTop)-parseInt(obj.style.top);
  posX=(FF?e.pageX:event.x+d.body.scrollLeft)-parseInt(obj.style.left);    
  mouseDown=obj;
}

function mouseup() {
  mouseDown=0;            
  obj = null;
}
function mousemove(e){if (obj){
  e=e||event;
  mouseDown.style.top=(FF?e.pageY:e.y+d.body.scrollTop)-posY;
  mouseDown.style.left=(FF?e.pageX:e.x+d.body.scrollLeft)-posX;
}} </script>
(Проблема, наверное, в забывании position:absolute была.) Чтобы не было багов с выделениями и перетаскиванием картинок, см. код по ссылкам выше. И этот код я бы сократил, выбросив мусор типа двойных переменных mouseDown=0; obj = null; .
PM WWW   Вверх
Valeria
Дата 12.1.2007, 17:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
12345c, спасибо! я всегда в вас верила! и правда заработало.
Цитата

mouseDown=0; obj = null; 


про это согласна,не заметила. 

единственное, тормозит сильно? улучшить нельзя?
у меня на странице предусмотрено много окон с сайтами, из-за них некорректно работает и картинки окно перекрывают!
PM MAIL ICQ   Вверх
12345c
Дата 12.1.2007, 19:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

Репутация: 57
Всего: 101
В смысле, "соскакивает" со слоя? Для этого надо анализировать d.onmousemove - http://js2.ru/example/JsPrimeryCode-56.htm (этот пример тоже обсуждался здесь где-то на форуме).


Это сообщение отредактировал(а) 12345c - 3.3.2008, 12:49


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
AKS
Дата 12.1.2007, 23:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52
Valeria
Цитата

тормозит сильно? улучшить нельзя?

Можно, почему же сразу "нельзя"? ;) Тем более, что "в FF ... слава богу и не надо чтоб работало!"...
Код

#addNewFeed {
    position:absolute;
    top:100px;
    left:200px;
    border:1px solid black;
    padding:10px;
    cursor:move;
}

Код

<div id='addNewFeed'>скрипт код Javascript</div>

Код

window.attachEvent('onload', init);
window.attachEvent('onbeforeunload', init);

function init(aEvent) {
    var div = document.getElementById('addNewFeed'),
        method = (aEvent.type) == 'load'
                 ? 'attachEvent'
                 : 'detachEvent';
    div[method]('onmousedown', mousedown);
    div[method]('onselectstart', prevent);
    div[method]('onmouseup', mouseup);
    document[method]('onmouseup', mouseup);
};

function mousedown(aEvent) {
    var el;
    mousemove.el = (el = aEvent.srcElement);                     
    el.posY = aEvent.clientY - el.offsetTop;
    el.posX = aEvent.clientX - el.offsetLeft;    
    document.attachEvent('onmousemove', mousemove);
    prevent(aEvent);  
}

function mousemove(aEvent) {
    var el = arguments.callee.el,
        y = aEvent.clientY - el.posY,
        x = aEvent.clientX - el.posX;
    el.style.top = y + 'px';
    el.style.left = x + 'px';
}

function mouseup() {
    document.detachEvent('onmousemove', mousemove);
}

function prevent(aEvent) {
    return (aEvent.returnValue = false);
}
PM MAIL   Вверх
Valeria
Дата 15.1.2007, 16:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
AKS, что-то твой код у меня плохо работает! во-первых, окно съезжает от мышки,но это поправимо!
и после нажатия мыши второй раз движение окна не прекращается!

Добавлено @ 16:29 
Цитата

В смысле, "соскакивает" со слоя?

нет,не соскакивает! начинает например выделять пространство вокруг когда быстро водишь окном. 
PM MAIL ICQ   Вверх
AKS
Дата 15.1.2007, 16:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52
Valeria
Цитата

код у меня плохо работает

А где можно посмотреть, как работает?
PM MAIL   Вверх
Valeria
Дата 15.1.2007, 18:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
Цитата

А где можно посмотреть, как работает? 

не знаю,помочь не могу,т.к. это у меня часть большого проекта запускаю в NetBeans (JSP)
PM MAIL ICQ   Вверх
12345c
Дата 16.1.2007, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

Репутация: 57
Всего: 101
Valeria,
Цитата
начинает например выделять пространство вокруг когда быстро водишь окном. 
 Ещё раз повторю, что при контроле за document.onmousemove побочных выделений не наблюдается (кроме Оперы, где нет механизма заблокировать выделение).
Пример, посторенный на базе вышеупомянутого:
http://js2.ru/example/xmp002/falling-snow-2.htm


Это сообщение отредактировал(а) 12345c - 3.3.2008, 12:51


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
S.A.P.
Дата 17.1.2007, 18:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: 8
Всего: 71
Проблема с выделением при перетаскивании элементов была подробно рассмотрена на форуме dklab. Идея заключалась в том, чтобы постоянно переводить фокус на скрытый input. Не работает в Safari.
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0680 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.