[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / Java Script /

Технология Drag & Drop

В JavaScript нет встроенный событий Drag и Drop, которые поддерживаются многими языках программирования, но есть средства, с помощью которых данную технологию можно реализоватю.

Код
скрипта:


<div style="position:relative; width:450px; height:125px; cursor:pointer">

<img src="bear.jpg" style="position:absolute; left:15px; top:10px"
onmousedown="Move(this)">

<div style="position:absolute; left:190px; top:10px; width:170px;
border: 1px solid; padding:5; text-align:left; background-color:white"
onmousedown="Move(this)">
Этот компонент имеет постоянный размер.
</div>

<div style="position:absolute; left:380px; top:10px" onmousedown="Move(this)">
Этот компонент не имеет постоянный размер.
</div>

<script type="text/javascript">
var SelectedItem;
var SelectedX, SelectedY;
var MouseX, MouseY;

function Move(ClickedItem)
{
SelectedItem = ClickedItem;
SelectedX = SelectedItem.style.pixelLeft;
SelectedY = SelectedItem.style.pixelTop;
MouseX = event.clientX;
MouseY = event.clientY;
document.onmousemove = Drag;
document.onmouseup = Drop;
}


function Drag()
{
SelectedItem.style.left = SelectedX + (event.clientX - MouseX);
SelectedItem.style.top = SelectedY + (event.clientY - MouseY);
return false;
}

function Drop()
{
document.onmousemove = null;
document.onmouseup = null;
}

</script>


С компонентами все понятно. У нас есть одна картинка и 3 компонента DIV, причем один из них является контейнером для двух других и картинки.

Рассмотрим подробней код скрипт. При нажатии на картинку или текст возникает событие onmousedown, которое вызывает функцию Move(this). this - название объекта, который вызвал функцию (например img или div).

Глобальной переменной SelectedItem присваивается имя компоненты, которая вызвала функцию

SelectedItem = ClickedItem

определяются координаты положения данной компоненты


SelectedX = SelectedItem.style.pixelLeft
SelectedY = SelectedItem.style.pixelTop


а также положение курсора мыши


MouseX = event.clientX
MouseY = event.clientY


При этом document.onmousemove присваивается функция Drag, которая будет выполнятся всякий раз, когда пользователь нажмет клавишей мыши на какой то компонент (рисунок, текст), а document.onmouseup (при отпускании кнопки мыши) функция Drop.

Функция Drag рассчитывает новые координаты положения картинки или текста в зависимости от расположения указателя мыши:


SelectedItem.style.left = SelectedX + (event.clientX - MouseX)
SelectedItem.style.top = SelectedY + (event.clientY - MouseY)


Функция Drop удаляет соответствие событиям вызов определенных функций:


document.onmousemove = null
document.onmouseup = null




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / Java Script /

Живые меню или Как сделать красиво с помощью CSS и JavaScript
14-03-2009   

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее

Кол. просмотров: общее - 3602 сегодня - 0

Локальная баннерная система
14-03-2009   

Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему. Первый фрагмент вы вставляете в любое место странички... подробнее

Кол. просмотров: общее - 3297 сегодня - 0

Локальная реклама
14-03-2009   

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее

Кол. просмотров: общее - 3417 сегодня - 1

Использование JS для создания «умных» форм
14-03-2009   

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее

Кол. просмотров: общее - 3414 сегодня - 0

Обманщик спам-роботов
14-03-2009   

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее

Кол. просмотров: общее - 3559 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects