Делаем перетаскивание
Как создать перетаскивающиеся изображения(JavaScript)
Для начала, как всегда, надо создать HTML шаблон:
<html>
<title>Drag'n'Drop</title>
<head>
<script language="javascript">
</script>
</head>
<body>
</body>
</html>
Разберёмся, как должна работаь наша программа:
Пользаватель щёлкает на изображение, тем самым активизирует его для перетаскивания, и перетаскивает его в нужную часть экрана, затем повторно щелкает на него,чем прекращает перетакивание.
Создадим две функции: первая отвечает за активизацию(деактивизацию) изображения, вторая непосредственно за перетаскивание.
Создаём первую функцию activate():
function activate() {
activate=!activate;
}
Функция activate() состоит из одной строки, для чего? Функция отвечает за активизацию(деактивизацию) изображений. Логическая переменная activate при каждом использовании функции меняет своё значение с true на false. В дальнейшем эта переменная сыграет одну из главных ролей.
Создаём вторую функцию grab():
function grab() {
if(activate) {
imgWdh=document.img.width;
imgHgt=document.img.height;
img.style.pixelLeft=event.x-imgWdh/2;
img.style.pixelTop=event.y-imgHgt/2;
}
}
Вот мы и используем нашу переменную activate.В строке if(activate) проверяется, какое значение принемает переменная activate.Если это значение true, то выполняются действия в операторных скобках, иначе ничего не происходит. ассмотрим действия в операторных скобках:
imgWdh=document.img.width;
imgHgt=document.img.height;
Строки определяют высоту и ширину изображения, где img- это имя(name) изображения.
img.style.pixelLeft=event.x-imgWdh/2;
img.style.pixelTop=event.y-imgHgt/2;
Функция отслеживает координаты мыши и перетаскивает за ней изображение(imgWdh/2 и imgHgt/2 нужны для того. чтобы курсор устанавливался в центр изображения)
Функция вызывается событием onMousemove, т.е. когда пользователь перемещает курсор по документу, но функционировать она начинает только тогда, когда переменная activate будет равнятся true. Для того чтоб при загрузке изображение не начало сразу двигаться за курсором, присвоим activate значение false , и поместим строку перед всеми функциями.
Ну вот вроде и всё, вот весь код программы:
<html>
<title>Drag'N'Drop</title>
<head>
<script language="javascript">
var activate=false;
function activate() {
activate=!activate;
}
function grab() {
if(activate) {
imgWdh=document.img.width;
imgHgt=document.img.height;
img.style.pixelLeft=event.x-imgWdh/2;
img.style.pixelTop=event.y-imgHgt/2;
}
}
</script>
<body onMousemove="grab()">
<img src="file.jpg" name="img" onClick="activate()" style="position:absolute;top:10;left:10">
</body>
</html>
Теперь вы можете сделать на своём сайте, например, мозайку, состоящую из нескольких таких функций, или ещё какое-нибудь интересное приложение, вперёд!!!(Приложение работает только в IE, но его не трудно модифицировать и для работы в Netscape Navigator)
По вопросам JavaScript и Flash 5, а так же программам связаными с web графикой обращаться на munchener@tut.by
Автор: © Andrew A
Источник:
http://www.flasher.ru
|
