Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите срочно: нужно организовать технлогию "перетаскивания" (https://javascript.ru/forum/misc/10818-pomogite-srochno-nuzhno-organizovat-tekhnlogiyu-peretaskivaniya.html)

Dima00782 22.07.2010 09:53

Помогите срочно: нужно организовать технлогию "перетаскивания"
 
Здравствуйте Всем, есть срочная проблема:
Есть поле(div) 300 на 300 пикселей и есть картинки(тэги img) как сделать так чтобы картинки можно было перетаскивать по полю??? Навожу на картинку щелкаю по ней мышью и удерживаю и тащю куда надо???
:help: :help: :help:

exec 22.07.2010 09:59

http://javascript.ru/ui/draganddrop

Dima00782 22.07.2010 10:23

Есть какой-нибудь готовый пример(не из этой ссылки)??? Очень нужно и быстро((( Я в JS на начальном уровне(знаю переменные и т.п.) А тут кучакода, да еще и в финальном демо нельзя просто потаскать обьекты(((

Skipp 22.07.2010 11:05

Dima00782,
Все хотят быстро и не прикладывая рук.
1. В гугле можно найти много похожего кода.
2. Или иди в раздел "Работа" и плати за работу деньги.

Dima00782 22.07.2010 11:16

Дело в том(но это уже не важно). Что мне дали проект... Я сам программист только серверных технологий, а тут на тебе и drug and drop а я сдуру взялся за работу, думал тоже что куча примеров и т.п. - это МИФ! половина из них даже не работает))) Вот такие сейчас прогеры пишут в интернете - выложили код на свой сайт, а работает, нет это вообще не интересует.

Skipp 22.07.2010 11:17

Dima00782,
используй jquery

exec 22.07.2010 11:26

Рабочий пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {font-family:Trebuchet MS;font-size:13px;color:#ffffff;}
div {padding:10px;background:black;}
.dragable {cursor:move;position:absolute;}
</style>
</head>
<body>
<div class="dragable">Подвигай меня</div>
<script>
function collectElems(){
	var b=document.all||document.getElementsByTagName('*');
	for(var i=0;i<b.length;i++){
		addEvt(b[i],'mousedown',function(a){
			if(mousePosition(a).t.className.match(/dragable/ig)){
				dragElems(mousePosition(a).t,a)
				}
			})
		}
	}
collectElems();
function dragElems(b,c){
	mousePosition(c,'p');
	var i,x,y,l,t;
	i=true;
	x=mousePosition(c).x;
	y=mousePosition(c).y;
	l=b.offsetLeft;
	t=b.offsetTop;
	addEvt(b,'mouseup',function(){i=false});
	addEvt(document,'mouseup',function(){i=false});
	addEvt(document,'mousemove',function(a){
		if(i){
			mousePosition(a,'p');
			b.style.left=l+mousePosition(a).x-x+'px';
			b.style.top=t+mousePosition(a).y-y+'px'
			}
		})
	}
function mousePosition(event,i){
	var d,x,y,t,b;
	d=document;
	b=/*@cc_on!@*/false;
	e=b?window.event:event;
	if(i){b?e.returnValue=false:e.preventDefault()}
	x=(b?d.documentElement.scrollTop:d.body.scrollTop)+e.clientX;
	y=(b?d.documentElement.scrollLeft:d.body.scrollLeft)+e.clientY;
	t=b?e.srcElement:e.target;
	return{x:x,y:y,t:t}
	}
function addEvt(a,b,i){
	if(a.addEventListener){a.addEventListener(b,i,false)}else
	if(a.attachEvent){a.attachEvent('on'+b,i)}else
	{a['on'+b]=i}
}
</script>
</body>
</html>


Просто ставите JS-код на страницу и нужному элементу ставите class="dragable".

Kolyaj 22.07.2010 11:58

Цитата:

Сообщение от Dima00782
Вот такие сейчас прогеры пишут в интернете - выложили код на свой сайт, а работает, нет это вообще не интересует.

Вот такие прогеры сейчас -- взялись за работу, а умеют, не умеют, это вообще не важно.


Часовой пояс GMT +3, время: 17:53.