Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > drag & drop


Автор: BSOD 8.12.2004, 21:22
Как сделать перетаскиваемую картинку?

Автор: Alx 8.12.2004, 23:23
Цитата(maximum @ 8.12.2004, 21:22)
Ламер - это вскипевший чайник.....

smile

Код

<html>
<head>
<title>Преретаскивание картинок</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.dragimg {background:#6699cc;position:absolute;}
</style>
<script>
function dragImages(obj)
{if (obj.taskaem == "da")
{obj.style.pixelLeft = window.event.x - obj.style.pixelWidth / 2;
obj.style.pixelTop = window.event.y - obj.style.pixelHeight / 2;
}
}
function putortakeImage(obj)
{if (obj.taskaem == "net")
obj.taskaem = "da";
else
if (obj.taskaem == "da")
obj.taskaem = "net";
}
</script>
</head>
<body id="tborder">
<img src="my_image" id="div1" class="dragimg" style="top:20;left:20;width:105;height:105;" taskaem="net" id="1" onmousemove="dragImages(this)" onclick="putortakeImage(this)" onmouseout="this.taskaem='net'">
</p>
</body>
</html>


к сожалению для Мозиллы не получилось... smile smile smile smile
но зато для Оперы любой работает smile у меня правда самая низкая - 5.12 (работает), но, надеюсь, этого хватит smile

Автор: Sardar 9.12.2004, 17:24
Зачем же IE only, скрипт на самом деле очень простой:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css">
.dragimg {background:#6699cc;position:absolute;}
</style>
<script language="Javascript" type="text/javascript">
<!--
function moveMe(obj, ev) {
 if(!obj.moving) return;
 obj.style.left=(window.event? window.event.x: ev.clientX)-obj.mouseX;
 obj.style.top=(window.event? window.event.y: ev.clientY)-obj.mouseY;
}
function initMoving(obj, ev) {
 obj.moving=true;
 var ox=0, oy=0, tgt=obj;
 while(tgt) {
   ox+=tgt.offsetLeft;
   oy+=tgt.offsetTop;
   tgt=tgt.offsetParent;
 }
 obj.mouseX=(window.event? window.event.x: ev.clientX)-ox;
 obj.mouseY=(window.event? window.event.y: ev.clientY)-oy;
}
//-->
</script>
</head>
<body>
<div class="dragimg" style="width: 200px; height:100px" onMouseUp="this.moving=false;" onMouseDown="initMoving(this, event)" onMouseMove="moveMe(this, event)"></div>
</body></html>
"

За место слоя ставим картинку.

P.S. достает подсветка, убивает скрипт после тега script...

Автор: Alx 9.12.2004, 17:27
Sardar
ну прям уж only.. smile

Цитата(ALEXANDRO @ 8.12.2004, 23:23)
для Оперы любой работает  у меня правда самая низкая - 5.12 (работает)


Автор: Sardar 9.12.2004, 17:32
ALEXANDRO ладно, не плохо вышло, ворчать не буду smile

Правда скритпы отличаются, у меня drag&drop каким я его представляю, нажал мышью и веди, отупистил, картинка встала.

Автор: sergejzr 9.12.2004, 17:39
Цитата(Sardar @ 9.12.2004, 16:24)
P.S. достает подсветка, убивает скрипт после тега script...

Это ведь HTML, а не javascript smile Хотя конечно ты прав ...

Автор: Alx 9.12.2004, 17:58
Цитата(Sardar @ 9.12.2004, 17:32)
Правда скритпы отличаются

лучше всего, когда есть выбор. когда есть выбор - это счастье. а мы за что боремся? за счастье юзверей!
Добавлено @ 18:01
Цитата(Sardar @ 9.12.2004, 17:32)
не плохо вышло

да ладно тебе, скрипт - пустячный. две с половиной строки...

Автор: BSOD 9.12.2004, 21:07
Цитата
к сожалению для Мозиллы не получилось...   

Да мне хватит и для explorer-а......... smile
Спасибо за помощь!

Автор: Alx 9.12.2004, 21:55
maximum
паажалуйста smile

Автор: Aliance 11.12.2004, 20:55
maximum
http://forum.vingrad.ru/index.php?showtopic=29662&st=0&#entry217088

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)