<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS &#187; drag</title>
	<atom:link href="http://php.infoniac.ru/tag/drag/feed/" rel="self" type="application/rss+xml" />
	<link>http://php.infoniac.ru</link>
	<description>Уроки программирования от новичка новичкам</description>
	<lastBuildDate>Tue, 20 Mar 2012 18:36:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Перемещение/Передвижение с помощью класса Drag.Move – Урок 12</title>
		<link>http://php.infoniac.ru/mootools-drag-move-objects-tut12.html</link>
		<comments>http://php.infoniac.ru/mootools-drag-move-objects-tut12.html#comments</comments>
		<pubDate>Mon, 01 Mar 2010 19:59:17 +0000</pubDate>
		<dc:creator>proglammer</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mootools]]></category>
		<category><![CDATA[Уроки новичка]]></category>
		<category><![CDATA[drag]]></category>
		<category><![CDATA[move]]></category>
		<category><![CDATA[интерактив]]></category>

		<guid isPermaLink="false">http://php.infoniac.ru/?p=592</guid>
		<description><![CDATA[По моему мнению, верх интерактивности, это когда пользователь сайта может не просто ввести текст в определенную форму, а когда он сам может изменять дизайн, например, сам определять те или иные параметры внешнего вида сайта или использовать перетаскивание для заполнения своей покупательской корзины, например. Перетаскивание - один из самых мощных инструментов JavaScript и библиотек на его основе. Поклонники "высшего пилотажа", те кто стремится сделать свои скрипты супер быстрыми и оптимизированными, скажут, что нужно всегда использовать Javascript для создания кода, но библиотеки сделаны не просто для развлечения. Да, написав код на JavaScript, вы сделаете свой скрипт самым быстрым насколько это возможно (конечно, в зависимости от уместности использования тех или иных функций/методов), но такие библиотеки, как Mootools, jQuery, Prototype и др. призваны облегчить жизнь веб-программиста: они сделали создание специальных эффектов и интерактивности на сайте довольно простым, что и должен будет доказать этот урок. Итак, учимся создавать перетаскиваемые объекты с помощью классов Drag и Drag.Move.]]></description>
			<content:encoded><![CDATA[<!-- google_ad_section_start --><div style="text-align:center;width:100%;margin:10px 0px 10px 0px;"><div style="margin:auto;"><script type="text/javascript"><!--
google_ad_client = "pub-8205915997794532";
/* 728x90, создано 08.12.10 */
google_ad_slot = "3730215141";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div><div style="width:100%;min-width:100%;"><h2>Drag.Move – Перемещение с помощью Mootools 1.2</h2>
<p>С 10-го урока я начал публиковать уроки, посвященные спец. эффектам, которые можно создавать с помощью библиотеки Mootools. Если Вы еще не взглянули в эти уроки, очень рекомендую <a href="http://php.infoniac.ru/fx-morph-fx-options-fx-events-day11.html">посмотреть</a>.</p>
<p>В сегодняшнем уроке мы поставим под прицел класс Drag.Move – очень сильный инструмент, который позволяет добавить возможность перемещения/перетаскивания элементов на странице. Вообще, эта возможность – это одна из моих самых любимых функций JavaScript и всех библиотек на его основе.</p>
<p>Используется этот класс также, как и все остальные плагины библиотеки: создается новый (<em>«new»</em>) объект Drag.Move и назначается переменной. Далее назначаются параметры и события объекта. В принципе, это и есть вся основа. Кстати, объекты Drag и Drag.Move не определены в основной библиотеке, потом нужно будет создавать свою собственную сборку Mootools с помощью <a title="Mootools More Builder" href="http://mootools.net/more" target="_blank">онлайн инструмента</a> на сайте разработчиков.</p>
<h2>Основы</h2>
<h3>Drag.Move</h3>
<p>Установка перетаскиваемого элемента довольно проста. Давайте рассмотрим пример ниже. Обратите внимание, как отделяются параметры и события класса <em>Drag.Move</em> от событий и параметров класса <em>Drag</em>. Drag.Move расширяет и дополняет класс Drag, потому он будет принимать не только свои параметры и события, но и те, что относятся к классу Drag. Сегодня мы не будем углубляться в работу Drag, но мы взглянем на несколько его интересных параметров и событий.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement<span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>

	        <span style="color: rgb(0, 102, 0); font-style: italic;">// параметры класса Drag.Move</span>
		droppables<span style="color: rgb(51, 153, 51);">:</span> dropElement<span style="color: rgb(51, 153, 51);">,</span>
		container<span style="color: rgb(51, 153, 51);">:</span> dragContainer<span style="color: rgb(51, 153, 51);">,</span>

		<span style="color: rgb(0, 102, 0); font-style: italic;">// параметры класса Drag</span>
		handle<span style="color: rgb(51, 153, 51);">:</span> dragHandle<span style="color: rgb(51, 153, 51);">,</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">// событие класса Drag.Move</span>
		onDrop<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(51, 153, 51);">,</span> dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

                        <span style="color: rgb(0, 102, 0); font-style: italic;">// вызовет предупреждение с атрибутом id сброшенного элемента</span>
                        <span style="color: rgb(0, 102, 0); font-style: italic;">// в элемент, принимающий сброшенные элементы</span>
                        <span style="color: rgb(0, 102, 0); font-style: italic;">// (это может показаться запутанным, на первый взглад, но, надеюсь,</span>
                        <span style="color: rgb(0, 102, 0); font-style: italic;">// далее все проясниться</span>
                        <span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span>dr.<span style="color: rgb(102, 0, 102);">get</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'id'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

		<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
                <span style="color: rgb(0, 102, 0); font-style: italic;">// События Drag</span>
                <span style="color: rgb(0, 102, 0); font-style: italic;">// передаются перетаскиваемому элементу</span>
                onComplete<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

			<span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span>el.<span style="color: rgb(102, 0, 102);">get</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'id'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
		<span style="color: rgb(0, 153, 0);">}</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Разберем всё это по полочкам…</p>
<h3>Параметры Drag.Move</h3>
<p>Параметры Drag.Move позволяют назначить два основных типа элементов:</p>
<ul>
<li><strong>droppables</strong> – опеределяет элементы, которые будут способны «принять» сброшенный элемент</li>
<li><strong>container</strong> – установить контейнер перетаскиваемого элемента (будет удерживать элемент внутри этого элемента-контейнера)</li>
</ul>
<p>Установка параметров доволно проста:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">//определяем один элемент по id, который можно будет перетаскивать</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dragElement <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drag_element'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//определяем массив элементов по их классу, которые смогут принят сброшенный элемент</span>

<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dropElements <span style="color: rgb(51, 153, 51);">=</span> $$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'.drag_element'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">//определяем контейнер</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dragContainer <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drag_container'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

<span style="color: rgb(0, 102, 0); font-style: italic;">//определяем объект Drag.Move</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement <span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>

	        <span style="color: rgb(0, 102, 0); font-style: italic;">// Параметры Drag.Move</span>
                <span style="color: rgb(0, 102, 0); font-style: italic;">// назначаем элементу droppables массив элементов, определённых немного выше</span>
		droppables<span style="color: rgb(51, 153, 51);">:</span> dropElements <span style="color: rgb(51, 153, 51);">,</span>
               <span style="color: rgb(0, 102, 0); font-style: italic;">// назначаем элементу container элемент, определенный немного выше</span>
		container<span style="color: rgb(51, 153, 51);">:</span> dragContainer
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>Теперь наш перетаскиваемый элемент имеет свой контейнер, а также у нас имеется класс элементов, который будет принимать сбросы других элементов. Тут можно провести аналогию с современными аэропортами: не все аэропорты предназначены для принятия и обслуживания определенных типов самолётов. Так и в нашем случае: необходимо определить, какой класс сможет принимать «на посадку» перетаскиваемые элементы.</p>
<h3>События объекта Drag.Move</h3>
<p>События этого объекта дают возможность запускать определенные заранее функции в определенные этапы существования объекта, как например в тот момент, когда пользователь «совершил захват» передвигаемого элемента, когда он начинает его передвигать или когда он его сбрасывает. События объекта Drag.Move передаются каждому перетаскиваемому и сбрасывамому элементу в качестве параметров.</p>
<ul>
<li><strong>onDrop</strong> – запускается при сбросе элемента в соответствующий принимающий элемент;</li>
<li><strong>onLeave</strong> – запускается когда перетаскиваемый элемент покидает границы элемента, способного принимать перетаскиваемые элементы;</li>
<li><strong>onEnter</strong> – запускается при входе перетаскиваемого элемента в зону принимающего элемента.</li>
</ul>
<p>Как и <a href="http://php.infoniac.ru/mootools-tutorial-day-5-events.html">любые другие события</a>, которые мы до этого обсуждали, события объекта Drag.Move вызывают функцию, которая выполняется когда событие исполняется.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dragContainer <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drag_container'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

&nbsp;
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement <span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">// Параметры Drag.Move</span>

	droppables<span style="color: rgb(51, 153, 51);">:</span> dropElements <span style="color: rgb(51, 153, 51);">,</span>
	container<span style="color: rgb(51, 153, 51);">:</span> dragContainer <span style="color: rgb(51, 153, 51);">,</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">// События Drag.Move</span>

	<span style="color: rgb(0, 102, 0); font-style: italic;">// функции Drag.Move передадут перетаскиваемый элемент (в данном случае 'el')</span>
	<span style="color: rgb(0, 102, 0); font-style: italic;">// принимающему элементу, с которым перетаскиваемый взаимодействует (у нас 'dr')</span>
	onDrop<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(51, 153, 51);">,</span> dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

		<span style="color: rgb(0, 102, 0); font-style: italic;">// на русском: "если элемента, на который происходит сброс НЕ ЯВЛЯЕТСЯ принимающий"</span>
		<span style="color: rgb(0, 0, 102); font-weight: bold;">if</span> <span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 153, 51);">!</span>dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
			<span style="color: rgb(0, 102, 0); font-style: italic;">//ничего не делать</span>
		<span style="color: rgb(0, 153, 0);">}</span>

		<span style="color: rgb(0, 102, 0); font-style: italic;">// в противном случае, т.е. элемент принимающий</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">// делать то-то, то-то</span>
		<span style="color: rgb(0, 0, 102); font-weight: bold;">else</span> <span style="color: rgb(0, 153, 0);">{</span>
			<span style="color: rgb(0, 102, 0); font-style: italic;">// действия, который произойдут,</span>
			<span style="color: rgb(0, 102, 0); font-style: italic;">// когда элемента будет сброшен на принимающий элемент</span>

		<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
	onLeave<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(51, 153, 51);">,</span> dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

		<span style="color: rgb(0, 102, 0); font-style: italic;">// эта функция будет запущена, когда перетаскиваемый элемент</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">// покинет границы принимающего элемента</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
	onEnter<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(51, 153, 51);">,</span> dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

		<span style="color: rgb(0, 102, 0); font-style: italic;">// эта функция будет запущена, когда перетаскиваемый элемент</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">// входит в границы принимающего элемента</span>
	<span style="color: rgb(0, 153, 0);">}</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<h3>Несколько событий объекта Drag</h3>
<p>У объекта Drag есть совсем немного событий и параметров, но и я не все буду рассматривать:</p>
<h4>Параметр – snap</h4>
<p>Параметр <strong>snap</strong> позволяет определить, на сколько пикселей пользователь должен передвинуть курсор прежде чем начнется сам процесс перемещения элемента. Значение по умолчанию – 6, но можно указать любое число или переменную, содержащую число. Конечно же, существуют некие логические рамки (установив это значение на 1000, никакой пользы не принесешь своему приложению), но все-таки этот параметр может сослужить хорошую службу разработчику при улучшении своего приложения.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement <span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>

	        <span style="color: rgb(0, 102, 0); font-style: italic;">// Параметры Drag</span>
		snap<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(204, 0, 0);">10</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<h4>Параметр – handle</h4>
<p>Данный параметр добавляет &#8220;ручку&#8221; к вашему перетаскиваемому элементу. Эта «ручка» определяет единственную область элемента, которой можно воспользоваться для &#8220;захвата&#8221; перетаскиваемого элемента, что позволяет использовать оставшуюся часть элемента для других целей. Для определения &#8220;ручки&#8221;, просто вызовите элемент.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 102, 0); font-style: italic;">// определяет массив элементов по классу</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">// это позволит нам добавить несколько "ручек",</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">// если нам нужно будет определять несколько передвигаемых элементов</span>
<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dragHandle <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drag_handle'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement <span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>
	        <span style="color: rgb(0, 102, 0); font-style: italic;">// параметры Drag</span>

		handle<span style="color: rgb(51, 153, 51);">:</span> dragHandle
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<h4>Событие onStart</h4>
<p>Событие <strong>onStart</strong> определяет функцию, которая будет запускаться при начале перетаскивания. Если значение параметра <strong>snap</strong> установлено большое, то событие не начнется до тех пор, пока заданное количество пикселей не будет пройдено.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement <span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>

	        <span style="color: rgb(0, 102, 0); font-style: italic;">// Параметры Drag</span>
		onStart<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
                    <span style="color: rgb(0, 102, 0); font-style: italic;">// сюда вставляем всё, что должно произойти вначале перетаскивания</span>

               <span style="color: rgb(0, 153, 0);">}</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<h4>Событие – onDrag</h4>
<p>Событие <strong>onDrag</strong> будет работать постоянно во время перетаскивания элемента.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement <span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>
	        <span style="color: rgb(0, 102, 0); font-style: italic;">// Параметры Drag</span>

		onDrag<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
                    <span style="color: rgb(0, 102, 0); font-style: italic;">// сюда вставляем всё, что должно происходить во время перетаскивания</span>
               <span style="color: rgb(0, 153, 0);">}</span>

	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<h4>Событие onComplete</h4>
<p>Событие <strong>onComplete</strong> запускается когда происходит сброс перетаскиваемого элемента и оно будет запущено вне зависимости от того, будет этот элемент приземлен в элементе droppable или нет.</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement <span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>

	        <span style="color: rgb(0, 102, 0); font-style: italic;">// Параметры Drag</span>
		onComplete<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
                    <span style="color: rgb(0, 102, 0); font-style: italic;">// сюда вставляем всё, что должно произойти при сбросе элемента</span>

               <span style="color: rgb(0, 153, 0);">}</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<h2>Примеры</h2>
<p>Снова подошло время моей любимой части любого урока: Пример!</p>
<p>Давайте, для упрощения процесса переваривания всей информации этого урока, соорудим пример, который бы содержал максимум из представленных параметров, событий и т.д. Поехали!</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family: monospace;">window.<span style="color: rgb(102, 0, 102);">addEvent</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'domready'</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dragElement <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drag_me'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dragContainer <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drag_cont'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dragHandle <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drag_me_handle'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dropElement <span style="color: rgb(51, 153, 51);">=</span> $$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'.draggable'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> startEl <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'start'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> completeEl <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'complete'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dragIndicatorEl <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drag_ind'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> enterDrop <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'enter'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> leaveDrop <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'leave'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> dropDrop <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'drop_in_droppable'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> 

&nbsp;
	<span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> myDrag <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">new</span> Drag.<span style="color: rgb(102, 0, 102);">Move</span><span style="color: rgb(0, 153, 0);">(</span>dragElement<span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>

	    <span style="color: rgb(0, 102, 0); font-style: italic;">// Параметры Drag.Move</span>
		droppables<span style="color: rgb(51, 153, 51);">:</span> dropElement<span style="color: rgb(51, 153, 51);">,</span>
		container<span style="color: rgb(51, 153, 51);">:</span> dragContainer<span style="color: rgb(51, 153, 51);">,</span>

		<span style="color: rgb(0, 102, 0); font-style: italic;">// Параметры Drag</span>
		handle<span style="color: rgb(51, 153, 51);">:</span> dragHandle<span style="color: rgb(51, 153, 51);">,</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">// События Drag.Move</span>
		onDrop<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(51, 153, 51);">,</span> dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

			<span style="color: rgb(0, 0, 102); font-weight: bold;">if</span> <span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 153, 51);">!</span>dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span> <span style="color: rgb(0, 153, 0);">}</span>
&nbsp;
        	        <span style="color: rgb(0, 0, 102); font-weight: bold;">else</span> <span style="color: rgb(0, 153, 0);">{</span>

				dropDrop.<span style="color: rgb(102, 0, 102);">highlight</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'#FB911C'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> <span style="color: rgb(0, 102, 0); font-style: italic;">//мигает оранжевым</span>
				el.<span style="color: rgb(102, 0, 102);">highlight</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'#fff'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> <span style="color: rgb(0, 102, 0); font-style: italic;">//мигает белым</span>

				dr.<span style="color: rgb(102, 0, 102);">highlight</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'#667C4A'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> <span style="color: rgb(0, 102, 0); font-style: italic;">//мигает зеленым</span>
			<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">;</span>
		<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>

		onLeave<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(51, 153, 51);">,</span> dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
			leaveDrop.<span style="color: rgb(102, 0, 102);">highlight</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'#FB911C'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> <span style="color: rgb(0, 102, 0); font-style: italic;">//мигает оранжевым</span>

		<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
		onEnter<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(51, 153, 51);">,</span> dr<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>

			enterDrop.<span style="color: rgb(102, 0, 102);">highlight</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'#FB911C'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> <span style="color: rgb(0, 102, 0); font-style: italic;">//мигает оранжевым</span>
		<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
		<span style="color: rgb(0, 102, 0); font-style: italic;">// Drag Events</span>

		onStart<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
			startEl.<span style="color: rgb(102, 0, 102);">highlight</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'#FB911C'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> <span style="color: rgb(0, 102, 0); font-style: italic;">//мигает оранжевым</span>

		<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
		onDrag<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
			dragIndicatorEl.<span style="color: rgb(102, 0, 102);">highlight</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'#FB911C'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> <span style="color: rgb(0, 102, 0); font-style: italic;">//мигает оранжевым</span>

		<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
		onComplete<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>el<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
			completeEl.<span style="color: rgb(102, 0, 102);">highlight</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'#FB911C'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span> <span style="color: rgb(0, 102, 0); font-style: italic;">//мигает оранжевым</span>

		<span style="color: rgb(0, 153, 0);">}</span>
	<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</p></div>
</div>
<p>В этом примере, в отличие от большинства ранее представленных, мы будем серьезно использовать CSS, потому нужно добавить некоторые пояснения к таблице CSS. Для того, чтобы контейнер Drag.Move нормально определялся в IE, нужно будет подробно объяснить позиционирование элементов этому популярному браузеру. Очень важно определить элементу-контейнеру «position:relative», а перетаскиваемому элементу «position:absolute». Далее нужно удостовериться в том, что знаяения «left» и «top» для этого элемента тажке установлены. Ну, а если вы создаете приложение с перетаскиваемыми элементами, которое никоим образом не предназначается для IE, можете вообще не обращать внимание на эту часть.</p>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family: monospace;">body <span style="color: rgb(0, 170, 0);">{</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">margin</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 102, 204);">0</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">padding</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 102, 204);">0</span><span style="color: rgb(0, 170, 0);">;</span>
<span style="color: rgb(0, 170, 0);">}</span>
&nbsp;

<span style="color: rgb(128, 128, 128); font-style: italic;">/* убедитесь в том, что перетаскиваемый элемент умеет "position: absolute"
 а параметры top и left установлены на значения для первоначального положения элемента*/</span>
<span style="color: rgb(204, 0, 204);">#drag_me</span> <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">width</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">100px</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">height</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">100px</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">background-color</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 0, 204);">#333</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">position</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">absolute</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">top</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 102, 204);">0</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">left</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 102, 204);">0</span><span style="color: rgb(0, 170, 0);">;</span>
<span style="color: rgb(0, 170, 0);">}</span>
&nbsp;
<span style="color: rgb(204, 0, 204);">#drop_here</span> <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">width</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">200px</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">height</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">200px</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">background-color</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 0, 204);">#eee</span><span style="color: rgb(0, 170, 0);">;</span>
<span style="color: rgb(0, 170, 0);">}</span>
&nbsp;

<span style="color: rgb(128, 128, 128); font-style: italic;">/* убедитесь в том, что элемент-контейнер имеет "position:relative" */</span>
<span style="color: rgb(204, 0, 204);">#drag_cont</span> <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">background-color</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 0, 204);">#ccc</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">height</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">600px</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">width</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">500px</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">position</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">relative</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">margin-top</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">100px</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">margin-left</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">100px</span><span style="color: rgb(0, 170, 0);">;</span>
<span style="color: rgb(0, 170, 0);">}</span>
&nbsp;
<span style="color: rgb(204, 0, 204);">#drag_me_handle</span> <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">width</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">100</span>%</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">height</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">auto</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">background-color</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 0, 204);">#666</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">cursor</span><span style="color: rgb(0, 170, 0);">:</span>move<span style="color: rgb(0, 170, 0);">;</span>

<span style="color: rgb(0, 170, 0);">}</span>
&nbsp;
<span style="color: rgb(204, 0, 204);">#drag_me_handle</span> span <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">display</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">block</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">padding</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">5px</span><span style="color: rgb(0, 170, 0);">;</span>

<span style="color: rgb(0, 170, 0);">}</span>
&nbsp;
<span style="color: rgb(102, 102, 255);">.indicator</span> <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">width</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">100</span>%</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">height</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">auto</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">background-color</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(204, 0, 204);">#0066FF</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">border-bottom</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">1px</span> <span style="color: rgb(153, 51, 51);">solid</span> <span style="color: rgb(204, 0, 204);">#eee</span><span style="color: rgb(0, 170, 0);">;</span>

<span style="color: rgb(0, 170, 0);">}</span>
&nbsp;
<span style="color: rgb(102, 102, 255);">.indicator</span> span <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">padding</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">10px</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">font-size</span><span style="color: rgb(0, 170, 0);">:</span><span style="color: rgb(153, 51, 51);">14px</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">display</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">block</span><span style="color: rgb(0, 170, 0);">;</span>
<span style="color: rgb(0, 170, 0);">}</span>
&nbsp;
<span style="color: rgb(102, 102, 255);">.draggable</span> <span style="color: rgb(0, 170, 0);">{</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">width</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">200px</span><span style="color: rgb(0, 170, 0);">;</span>

	<span style="color: rgb(0, 0, 0); font-weight: bold;">height</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(153, 51, 51);">200px</span><span style="color: rgb(0, 170, 0);">;</span>
	<span style="color: rgb(0, 0, 0); font-weight: bold;">background-color</span><span style="color: rgb(0, 170, 0);">:</span> <span style="color: rgb(0, 0, 0); font-weight: bold;">blue</span><span style="color: rgb(0, 170, 0);">;</span>
<span style="color: rgb(0, 170, 0);">}</span></pre>
</p></div>
</div>
<p>Далее следует HTML код, который создаст нам плацдарм для восхощения возможностями Mootools.</p>
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"drag_cont"</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"start"</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"indicator"</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;</span>Начало<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>

<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"drag_ind"</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"indicator"</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;</span>Перетаскивание<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"complete"</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"indicator"</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;</span>Завершен<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>

<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"enter"</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"indicator"</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;</span>Вход в принимающий элемент<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"leave"</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"indicator"</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;</span>Выход из принимающего элемента<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>

<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"drop_in_droppable"</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"indicator"</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;</span>Сброшен в принимающий элемент<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"drag_me"</span>&gt;</span>

<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"drag_me_handle"</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;</span>ручка<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">span</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"drop_here"</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"draggable"</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>

<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span></pre>
</p></div>
</div>
<div id="drag_cont">
<div style="background-color: rgb(0, 102, 255);" id="start" class="indicator"><span>Начало</span></div>
<div style="background-color: rgb(0, 102, 255);" id="drag_ind" class="indicator"><span>Перетаскивание</span></div>
<div style="background-color: rgb(0, 102, 255);" id="complete" class="indicator"><span>Завершен</span></div>
<div style="background-color: rgb(0, 102, 255);" id="enter" class="indicator"><span>Вход в принимающий элемент</span></div>
<div style="background-color: rgb(0, 102, 255);" id="leave" class="indicator"><span>Выход из принимающего элемента</span></div>
<div style="background-color: rgb(0, 102, 255);" id="drop_in_droppable" class="indicator"><span>Сброшен в принимающий элемент</span></div>
<div style="position: absolute; left: 59px; top: 279px; background-color: rgb(51, 51, 51);" id="drag_me">
<div id="drag_me_handle"><span>ручка</span></div>
</p></div>
<div style="background-color: rgb(238, 238, 238);" id="drop_here" class="draggable"></div>
</div>
</div><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://php.infoniac.ru/mootools-drag-move-objects-tut12.html/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

