Drag and Drop в JavaScript - JavaScript, Ajax

Ruska882009 · 31.03.2009, 17:22

Привет Всем!!!!
Подкиньте пожалуйста какие-нибудь примеры простые на Drag and Drop в JavaScript, заранее спасибо!!!!

Sazary · 31.03.2009, 18:05

Ну вот вам небольшой пример:

Код HTML:

<html>

<head><title></title></head>

<script>
var cof=false;
function downm(){
dyn=window.event.srcElement;
down();
}
function down(){
xmin=parseInt(window.event.offsetX);
ymin=parseInt(window.event.offsetY);
cof=true;
}
function drag(){
if(cof==true){
xmos=parseInt(window.event.x);
ymos=parseInt(window.event.y);
dyn.style.left=xmos-xmin+document.body.scrollLeft;
dyn.style.top=ymos-ymin+document.body.scrollTop;
}
}

</script>
<body onmousemove="drag()">
<form onmousedown="downm()" onmouseup="cof=false">
<div style="position:absolute;width:100;height:100;background-color:00ff33;top:10;left:10"></div>
<div style="position:absolute;width:100;height:100;background-color:003453;top:10;left:100"></div>
<div style="position:absolute;width:100;height:100;background-color:000000;top:10;left:210"></div>
<div style="position:absolute;width:100;height:100;background-color:ffcc55;top:10;left:310"></div>
<div style="position:absolute;width:100;height:100;background-color:ccff33;top:10;left:410"></div>
<div style="position:absolute;width:100;height:100;background-color:1d2344;top:10;left:510"></div>
</form>
</body>
</html>

murka3000 · 27.08.2009, 17:09

Я немного изменил код:

Код:

<style>div{position:absolute;width:200;height:20;left:10;z-index:1}</style>

<script>
var cof=false;
function mousedown(){
	dyn=window.event.srcElement; // Загоняем объект в переменную
	yoffset=parseInt(window.event.offsetY); // Разница между курсором и верхней границей объекта
	cof=true;
	return false // Против выделения текста при перетаскивании
	}
function mousemove(){
	if(cof==true){
		ymouse=parseInt(window.event.y);
		dyn.style.top=ymouse-yoffset+document.body.scrollTop;
		dyn.style.zIndex=2; // Делаем передвигаемый объект выше других
		}
	}
function mouseup(){
	dyn.style.zIndex=1; // Возвращаем слой как у всех
	cof=false;
	}

document.onmousemove = mousemove
document.onmousedown = mousedown
document.onmouseup = mouseup 
</script>

<body>
<form name=drag123>
<div style="background-color:00ff33;top:10">rf</div>
<div style="background-color:003453;top:30"></div>
<div style="background-color:000000;top:50"></div>
<div style="background-color:ffcc55;top:70"></div>
</form>

Двигаться они теперь могут только вертикально.
Как заставить раздвигаться соседние дивы, если объект под мышкой ниже\выше их и чтобы вставал ровно на их место?
Я так понимаю, все объекты нужно считать как-то?
И как в конце сохранить порядок (например, по Y координатам)?

SkyM@n · 27.08.2009, 21:00

http://www.linkexchanger.su/2008/23.html
http://jqueryui.com/demos/draggable/
http://geekswithblogs.net/AzamSharp/...21/119882.aspx

murka3000 · 29.08.2009, 23:39

Короче, больше недели убил на этот скрипт, релизовал всё, что хотел.
Впринцепи, вышел маленький скрипт, работающий во всех браузерах.

Написал везде объяснения.
Пользуйтесь, если кому надо, мне не жалко =)

Код:

<style>
#drag123 *{cursor:move; border: 1px solid #ccc; background-color: #eee; width:200; height:20; z-index:1;}
.dragging {z-index:2; opacity:0.8; FILTER: Alpha(opacity=80);}
.draggingReset {z-index:1; opacity:1.0; FILTER: none;}
</style>

<script>
var cof=false; var absoluting = 0;
function down(){ // Действия при клике
	distance = 0; // Для дальнейшего подсчёта высот пройденных объектов, чтобы поставить передвигаемый ровно
	offsetY=parseInt(window.event.offsetY); // Разница между курсором и верхней границей объекта
	act_obj = window.event.srcElement.id;  // ID передвигаемого объекта
	dragObjects = document.getElementById('drag123').getElementsByTagName('*'); // Все элементы внутри указанной
	for(var i=0; i<dragObjects.length; i++) { // Придача каждому его высоты и начальных координат
		if(dragObjects[i].id == act_obj) act_obj = i; // Обозначить номер передвигаемого объекта
		dragObjects[i].start = dragObjects[i].offsetTop; // Начальная расположение
		dragObjects[i].height = dragObjects[i].clientHeight+2; // Высота объекта с рамкой
		} 
	if(absoluting==0) { // Сделать все объекты абсолютно позиционированными (только в первый раз)
		for(var i=0; i<dragObjects.length; i++){
			dragObjects[i].style.position = 'absolute';
			dragObjects[i].style.top = dragObjects[i].start;
			}
		absoluting = 1;
		}
	cof=true;
	}

function move(){ // Действия при зажатой кнопке
	if(cof==true){
		distance = 0; // При изменении координат мыши сбить счётчик пройденного
		mouseY=parseInt(window.event.y); // Координаты мышки при движении
		dragObjects[act_obj].style.top=mouseY-offsetY-5+document.body.scrollTop; // Динамичное передвижение объекта за мышкой
		dragObjects[act_obj].className = 'dragging'; // Придаём визуальные свойства передвигаемому объекту (CSS)
		dragObjects[act_obj].style.zIndex=2; // Чтобы работало везде
		for(var i=0; i<dragObjects.length; i++) {
			if(i != act_obj){ // Проверить расположение всех объектов, кроме перетаскиваемого
				var center_act_now = dragObjects[act_obj].offsetTop + dragObjects[act_obj].height/2; // Динамичное (постоянно меняющееся) расположение середны проверяемого
				var center_cur = dragObjects[i].start + dragObjects[i].height/2; // Начальное расположение середны проверяемого
				var center_cur_now = dragObjects[i].offsetTop + dragObjects[i].height/2; // Динамичное расположение середны проверяемого
				// Если середина перетаскиваемого объекта сейчас ниже середины проверяемого И изначально была выше
				if(center_act_now > center_cur_now && center_cur > dragObjects[act_obj].start){
					// То поднять проверяемый на высоту перетаскиваемого
					dragObjects[i].style.top = dragObjects[i].start - dragObjects[act_obj].height;
					distance += dragObjects[i].height;}
				// И наоборот - если сейчас выше, а в начале была ниже
				else if(center_act_now < center_cur_now && center_cur < dragObjects[act_obj].start){
					// То опустить
					dragObjects[i].style.top = dragObjects[i].start + dragObjects[act_obj].height;
					distance -= dragObjects[i].height;}
				// Во всех противных случаях вернуть затронутые объекты их на начальные расположения
				else dragObjects[i].style.top = dragObjects[i].start;
				}
			}
		}
	return false; // Против выделения тескта при выдедении
	}

function up(){ // Действия после отпускания кнопки
	dragObjects[act_obj].style.top = dragObjects[act_obj].start + distance; // Передвигаем ровно на высоту пройденных объекстов
	dragObjects[act_obj].innerHTML += ' *'; // Кому не надо - можно убрать строчку
	dragObjects[act_obj].className = 'draggingReset' // Возвращаем начальные визуальные настройки
	dragObjects[act_obj].style.zIndex=1; // Для всех браузеров
	save(); // Вычислить порядок элементов
	cof=false;
	}

function save(){ // Сортировка элементов по их расположению и результат записываем в input
	var dragSort = new Array();
	var saveOutput = "";
	
	for(var i=0; i<dragObjects.length; i++) dragSort[i] = Array(dragObjects[i].id, dragObjects[i].offsetTop);
	dragSort.sort(function(i,ii){if (i[1] > ii[1]) return 1; else if (i[1] < ii[1]) return -1; else return 0;});
	for(var i=0; i<dragObjects.length; i++) saveOutput += dragSort[i][0]+"|";
	document.getElementById('save').value = saveOutput;
	}

document.onmousedown = down
document.onmousemove = move
document.onmouseup = up
</script>

<body>
<div id=drag123>
<div id=div1>div1</div>
<div style=height:50 id=div2>div2</div>
<div id=div3>div3</div>
<div id=div4>div4</div>
</div>

<input style=position:absolute;top:10;left:300 id=save value=result>

31.03.2009, 17:22	#1
Ruska882009 Пользователь Регистрация: 13.02.2009 Сообщений: 68	Drag and Drop в JavaScript Привет Всем!!!! Подкиньте пожалуйста какие-нибудь примеры простые на Drag and Drop в JavaScript, заранее спасибо!!!!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
drag $ drop в DBGrid	AlexandrSid	Общие вопросы Delphi	13	21.06.2010 10:55
Помогите с drag-and-drop	Cezar	Win Api	3	19.10.2008 15:48
Drag and Drop	Xardas	Общие вопросы Delphi	8	20.01.2008 23:09

27.08.2009, 21:00	#4
SkyM@n Laravel/Vue expert Старожил Подтвердите свой е-майл Регистрация: 08.08.2007 Сообщений: 2,832	http://www.linkexchanger.su/2008/23.html http://jqueryui.com/demos/draggable/ http://geekswithblogs.net/AzamSharp/...21/119882.aspx