ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Перемещение графических и текстовых элементов мышью

Перемещение

Видимые элементы HTML-документов можно перемещать с помощью мыши. Такими элементами являются графические объекты, кнопки, текстовые области, таблицы, плавающие фреймы и др.

Перемещение графических объектов

Рассмотрим один из способов перемещения изображения мышью:

  • пользователь пытается перетащить мышью изображение;
  • затем он должен отпустить кнопку мыши и переместить указатель в нужное место (при этом он может удерживать или не удерживать кнопку мыши в нажатом положении);
  • остановившись в нужном месте, пользователь отпускает кнопку мыши или щелкает ею, чтобы прекратить перемещение изображения.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Перемещение изображения мышью</title>
<style><!--
.drag{ position:absolute; top:20; left:20}
-->
</style>
</head>

<body id="mybody" bgcolor="#CCFFFF" >
<img id="myimg" src="../images/foto19.gif" width="440" height="260" ondragstart="drags()" class=drag>

</body>
<script type="text/javascript">
flag=false //нельзя перемещать
var id_img=""
function drags(){
flag=!flag
id_img=event.srcElement.id
}

function mybody.onmousemove(){
if (flag) { //если можно перемещать
document.getElementById(id_img).style.top=event.clientY
document.getElementById(id_img).style.left=event.clientX
}
}

function mybody.onmouseup(){
flag=false //нельзя перемещать
}
</script>>
</html>

В окне веб-браузера это будет выглядеть ТАК.

А теперь усложним задачу.

  • пользователь наводит курсор на изображение;
  • затем он должен нажать кнопку мыши и переместить изображение в нужное место (при этом он должен удерживать кнопку мыши в нажатом положении);
  • остановившись в нужном месте, пользователь отпускает кнопку мыши, чтобы прекратить перемещение изображения.

Пишем HTML- код документа.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Перемещение изображения мышью</title>
<style>
<!--
.drag{position:relative;cursor:move}
-->
</style>
<script type="text/javascript">

var flag=false //перемещать нельзя
var z,x,y
function move(){
if (event.button==1&&flag){
z.style.pixelLeft= temp1+event.clientX-x
z.style.pixelTop= temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
flag=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("flag=false")
//-->
</script>

</head>

<body bgcolor="#CCFFFF">
<h2>Перемещение изображения мышью</h2>
<img src="../images/foto15.gif" class="drag">
</html>

event.button – определяет кнопку мыши, вызывающую событие;

В окне веб-браузера это будет выглядеть ТАК.

Перемещение текстовых областей

Рассмотрим пример HTML-документа, в котором можно перемещать текстовые области, созданные с помощью тега <TEXTAREA>. При этом размеры области и шрифта текста определяются в ней в зависимости от значения вертикальной координаты. Так создается эффект перспективы (ближе-дальше). Чем выше, тем дальше, и наоборот. Чтобы приблизить к себе текстовую область, необходимо просто переместить ее в низ. Можно сложить в стопку текстовые области, отодвинуть их от себя или, наоборот, приблизить так, чтобы текст стал разборчивым. В отличии от примера с изображениями, здесь разрешение перемещения происходит по двойному щелчку на текстовой области. Функция resizetext() определяет элемент, размеры которого следует изменить. Можно создать и более сложный алгоритм для функции resizetext(), дополнительно варьируя цвет фона и шрифта.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Перемещение текстовых областей</title>
<style>
.drag{
position:absolute;
top:10px;
left:10px;
font-size:16px
}
.drag1{
position:absolute;
top:100px;
left:150px;
}
.drag2{
position:absolute;
top:150px;
left:250px;
}
</style>
</head>

<body id="mybody" bgcolor="#CCFFFF">
<textarea class="drag" id="t1" onDblClick="drags()">
Первая текстовая область
</textarea>
<textarea class="drag1" id="t2" onDblClick="drags()">
Вторая текстовая область
</textarea>
<textarea class="drag2" id="t3" onDblClick="drags()">
Вторая текстовая область
</textarea>
</body>
<script type="text/javascript">

resizetext() // установка размеров текстовых областей
var flag = false
var id_img = ""

function drags() {
flag = !flag
id_img = event.srcElement.id // id элемента, который надо пермещать
}
function mybody.onmousemove() {
if (flag) {
document.getElementById(id_img).style.top = event.clientY
document.getElementById(id_img).style.left = event.clientX // установка размеров текстовых областей
}
}

function mybody.onmouseup() {
flag = false
}

function resizetext() { // установка размеров текстовых областей
var y, size, idimg, idtext
for (i=0; i<document.all.length; i++) {
if (document.getElementById(i).tagname == 'textarea') {
idtext = document.getElementById(i).id
y = parseInt(document.getElementById(idtext).style.top)
size = Math.min(y, 800)
size = Math.max(size, 60)
document.getElementById(idtext).style.width = size
document.getElementById(idtext).style.height = 0.8*size
document.getElementById(idtext).style.zIndex = y
document.getElementById(idtext).style.fontSize = Math.max(2, y/10)
}
}
}

</script>
</html>

В окне веб-браузера это будет выглядеть ТАК.