Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS

var myDrag = new Drag.Move(dragElement, {

	        // параметры класса Drag.Move
		droppables: dropElement,
		container: dragContainer,

		// параметры класса Drag
		handle: dragHandle,
		// событие класса Drag.Move
		onDrop: function(el, dr) {

                        // вызовет предупреждение с атрибутом id сброшенного элемента
                        // в элемент, принимающий сброшенные элементы
                        // (это может показаться запутанным, на первый взглад, но, надеюсь,
                        // далее все проясниться
                        alert(dr.get('id'));

		},
                // События Drag
                // передаются перетаскиваемому элементу
                onComplete: function(el) {

			alert(el.get('id'));
		}
	});

//определяем один элемент по id, который можно будет перетаскивать
var dragElement = $('drag_element');
//определяем массив элементов по их классу, которые смогут принят сброшенный элемент

var dropElements = $$('.drag_element');
//определяем контейнер
var dragContainer = $('drag_container');

//определяем объект Drag.Move
var myDrag = new Drag.Move(dragElement , {

	        // Параметры Drag.Move
                // назначаем элементу droppables массив элементов, определённых немного выше
		droppables: dropElements ,
               // назначаем элементу container элемент, определенный немного выше
		container: dragContainer
	});

var dragContainer = $('drag_container');

 
var myDrag = new Drag.Move(dragElement , {
	// Параметры Drag.Move

	droppables: dropElements ,
	container: dragContainer ,
	// События Drag.Move

	// функции Drag.Move передадут перетаскиваемый элемент (в данном случае 'el')
	// принимающему элементу, с которым перетаскиваемый взаимодействует (у нас 'dr')
	onDrop: function(el, dr) {

		// на русском: "если элемента, на который происходит сброс НЕ ЯВЛЯЕТСЯ принимающий"
		if (!dr) {
			//ничего не делать
		}

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

		};
	},
	onLeave: function(el, dr) {

		// эта функция будет запущена, когда перетаскиваемый элемент
		// покинет границы принимающего элемента
	},
	onEnter: function(el, dr) {

		// эта функция будет запущена, когда перетаскиваемый элемент
		// входит в границы принимающего элемента
	}
});

var myDrag = new Drag.Move(dragElement , {

	        // Параметры Drag
		snap: 10
	});

// определяет массив элементов по классу
// это позволит нам добавить несколько "ручек",
// если нам нужно будет определять несколько передвигаемых элементов
var dragHandle = $('drag_handle');

var myDrag = new Drag.Move(dragElement , {
	        // параметры Drag

		handle: dragHandle
	});

var myDrag = new Drag.Move(dragElement , {

	        // Параметры Drag
		onStart: function(el) {
                    // сюда вставляем всё, что должно произойти вначале перетаскивания

               }
	});

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag

		onDrag: function(el) {
                    // сюда вставляем всё, что должно происходить во время перетаскивания
               }

	});

var myDrag = new Drag.Move(dragElement , {

	        // Параметры Drag
		onComplete: function(el) {
                    // сюда вставляем всё, что должно произойти при сбросе элемента

               }
	});

window.addEvent('domready', function() {

	var dragElement = $('drag_me');
	var dragContainer = $('drag_cont');

	var dragHandle = $('drag_me_handle');
	var dropElement = $$('.draggable');

	var startEl = $('start');
	var completeEl = $('complete');

	var dragIndicatorEl = $('drag_ind');
	var enterDrop = $('enter');

	var leaveDrop = $('leave');
	var dropDrop = $('drop_in_droppable'); 

 
	var myDrag = new Drag.Move(dragElement, {

	    // Параметры Drag.Move
		droppables: dropElement,
		container: dragContainer,

		// Параметры Drag
		handle: dragHandle,
		// События Drag.Move
		onDrop: function(el, dr) {

			if (!dr) { }
 
        	        else {

				dropDrop.highlight('#FB911C'); //мигает оранжевым
				el.highlight('#fff'); //мигает белым

				dr.highlight('#667C4A'); //мигает зеленым
			};
		},

		onLeave: function(el, dr) {
			leaveDrop.highlight('#FB911C'); //мигает оранжевым

		},
		onEnter: function(el, dr) {

			enterDrop.highlight('#FB911C'); //мигает оранжевым
		},
		// Drag Events

		onStart: function(el) {
			startEl.highlight('#FB911C'); //мигает оранжевым

		},
		onDrag: function(el) {
			dragIndicatorEl.highlight('#FB911C'); //мигает оранжевым

		},
		onComplete: function(el) {
			completeEl.highlight('#FB911C'); //мигает оранжевым

		}
	});
});

body {

	margin: 0;
	padding: 0;
}
 

/* убедитесь в том, что перетаскиваемый элемент умеет "position: absolute"
 а параметры top и left установлены на значения для первоначального положения элемента*/
#drag_me {
	width: 100px;
	height: 100px;

	background-color: #333;
	position: absolute;
	top: 0;

	left: 0;
}
 
#drop_here {
	width: 200px;

	height: 200px;
	background-color: #eee;
}
 

/* убедитесь в том, что элемент-контейнер имеет "position:relative" */
#drag_cont {
	background-color: #ccc;
	height: 600px;

	width: 500px;
	position: relative;
	margin-top: 100px;

	margin-left: 100px;
}
 
#drag_me_handle {
	width: 100%;

	height: auto;
	background-color: #666;
	cursor:move;

}
 
#drag_me_handle span {
	display: block;
	padding: 5px;

}
 
.indicator {
	width: 100%;
	height: auto;

	background-color: #0066FF;
	border-bottom: 1px solid #eee;

}
 
.indicator span {
	padding: 10px;
	font-size:14px;

	display: block;
}
 
.draggable {
	width: 200px;

	height: 200px;
	background-color: blue;
}

<div id="drag_cont">
<div id="start" class="indicator"><span>Начало</span></div>

<div id="drag_ind" class="indicator"><span>Перетаскивание</span></div>
<div id="complete" class="indicator"><span>Завершен</span></div>

<div id="enter" class="indicator"><span>Вход в принимающий элемент</span></div>
<div id="leave" class="indicator"><span>Выход из принимающего элемента</span></div>

<div id="drop_in_droppable" class="indicator"><span>Сброшен в принимающий элемент</span></div>
<div id="drag_me">

<div id="drag_me_handle"><span>ручка</span></div>
</div>
<div id="drop_here" class="draggable"></div>

</div>