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

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

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<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- код документа.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<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 >
</body>
</html>

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

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

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<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>

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



  • Другие |
назадвверхвперед
Rambler's Top100