Использование функции "Перетащи и Брось" в HTML5

() translation by (you can also view the original English article)

Одной из новых функций в HTML5 является встроенный функционал "Перетащи и Брось". Удивительно, но Internet Explorer поддерживает встроенную функцию "Перетащи и Брось" начиная с версии 5.5; Фактически HTML5 основан на поддержке IE. В сегодняшнем уроке мы рассмотрим то, как реализовать нативный функционал "Перетащи и Брось" чтобы создать простой интерфейс корзины покупателя.

Шаг 0. Что мы собираемся сделать

Вот что мы собираемся создать: простая корзина покупателя с панелью товаров и панелью для корзины. Чтобы "купить" продукт, вы можете перетащить его с панели на значок корзинки; мы будем отслеживать количество покупок и удалять товары из панели, когда их нет в наличии.

Обратите внимание, что мы на самом деле не создаем полнофункциональную корзину покупателя; сегодня мы не будем работать с серверной частью. Это будет только интерфейс; наша цель - функционал "Перетащи и Брось" с помощью HTML5.

Шаг 1. HTML

Конечно, мы начнем с HTML кода; вот наш каркас:

 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Drag and Drop Shopping Cart</title> 
    <link rel="stylesheet" href="default.css" /> 
</head> 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="jquery.ndd.js"></script> 
    <script src="dragdrop.js"></script> 
</body> 
</html>

Все довольно просто: мы добавляем ссылки на таблицу стилей и jQuery; мы будем использовать jQuery только для удобной обработки событий и манипуляций с DOM; функционал "Перетащи и Брось" будет нативным. Однако мы можем столкнуться с трудностями, потому что функционал "Перетащи и Брось" в HTML5 добавляет несколько свойств к объекту события. А так как JQuery не использует объект события по-умолчанию; он создает свой собственный эквивалент. И из-за этого мы не можем получить доступ к специальным свойствам с помощью jQuery. Но не беспокойтесь; для этого есть специальный плагин; мы подключаем плагин Native Drag and Drop, чтобы все это работало. И, наконец, мы подключаем наш скрипт: dragdrop.js.

Теперь мы готовы добавить наш список товаров; в качестве изображений товаров я использую значки из Apple Icon Superpack, созданные SvenVath. (Я переименовал значки упростив имена и изменил их размер до 180 пикселей.)

Добавьте ul #products в качестве первого элемента для тега body. Как только вы это сделаете, мы рассмотрим первый элемент списка:

 
<li><a class="item" href="#" id="imac" draggable="true"> 
    <img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/064_drag_drop_html5/images/imac.png" /> 
    <div> 
        <p><strong>iMac</strong></p> 
        <p><strong>Price</strong>: <span>$1199.00</span></p> 
        <p><strong>Quantity</strong>: <span>10</span></p> 
    </div> 
</a></li>

Мы завершаем элемент списка якорем внутри; обратите внимание, что каждый элемент имеет класс элемента (это будет важно, когда мы перейдем к CSS) и пользовательский идентификатор (это будет важно, когда мы перейдем к JavaScript). Также, якорь имеет атрибут draggable = "true"; это все, что нам нужно, чтобы сделать элемент перетаскиваемым (мы скоро обнаружим несколько предостережений). Так как мы используем тег якоря, вы должны сделать что-то для браузеров без встроенной поддержки перетаскивания (хотя мы и не будем этого делать здесь). Затем у нас есть изображение продукта и слой с информацией о продукте. И да, необходимо оформить цену и значение количества с помощью тега span

Вот остальные элементы списка:

 
<li><a class="item" href="#" id="iphone" draggable="true"> 
    <img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/064_drag_drop_html5/images/iphone.png" /> 
    <div> 
        <p><strong>iPhone</strong></p> 
        <p><strong>Price</strong>: <span>$199.00</span></p> 
        <p><strong>Quantity</strong>: <span>16</span></p> 
    </div> 
</a></li> 
<li><a class="item" href="#" id="appletv" draggable="true"> 
    <img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/064_drag_drop_html5/images/appletv.png" /> 
    <div> 
        <p><strong>AppleTV</strong></p> 
        <p><strong>Price</strong>: <span>$299.00</span></p> 
        <p><strong>Quantity</strong>: <span>9</span></p> 
    </div> 
</a></li> 
<li><a class="item" href="#" id="dislpay" draggable="true"> 
    <img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/064_drag_drop_html5/images/display.png" /> 
    <div> 
        <p><strong>Cinema Display</strong></p> 
        <p><strong>Price</strong>: <span>$899.00</span></p> 
        <p><strong>Quantity</strong>: <span>4</span></p> 
    </div> 
</a></li> 
<li><a class="item" href="#" id="nano" draggable="true"> 
    <img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/064_drag_drop_html5/images/nano.png" /> 
    <div> 
        <p><strong>iPod Nano</strong></p> 
        <p><strong>Price</strong>: <span>$149.00</span></p> 
        <p><strong>Quantity</strong>: <span>20</span></p> 
    </div> 
</a></li> 
<li><a class="item" href="#" id="macbook" draggable="true"> 
    <img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/064_drag_drop_html5/images/macbook.png" /> 
    <div> 
        <p><strong>Macbook</strong></p> 
        <p><strong>Price</strong>: <span>$1199.00</span></p> 
        <p><strong>Quantity</strong>: <span>13</span></p> 
    </div> 
</a></li> 
<li><a class="item" href="#" id="mini" draggable="true"> 
    <img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/064_drag_drop_html5/images/mini.png" /> 
    <div> 
        <p><strong>Mac Mini</strong></p> 
        <p><strong>Price</strong>: <span>$599.00</span></p> 
        <p><strong>Quantity</strong>: <span>18</span></p> 
    </div> 
</a></li>

Вот финальный вариант HTML: корзина для покупок:

1
2	<div id="cart">
3	<h1>Shopping Cart</h1>
4	<ul></ul>
5	<p id="total"><strong>Total:</strong> $<span>0.00</span></p>
6	<hr /><h2>Drop here to add to cart</h2>
7	</div>

И это наш весь код HTML!

Полный креатив

Шаг 2. CSS

В идеале, все, что вам нужно сделать, чтобы сделать элемент перетаскиваемым, установить значение для атрибута draggable true; тем не менее, есть еще кое-что для этого. Чтобы все работало правильно, вы должны установить несколько вещей с помощью CSS. Во-первых, подумайте об этом: что происходит при нажатии и перетаскивании "нормального" (неперетаскиваемого) элемента? Обычно происходит выделение текста. Также мы хотим убедиться, что мы перетаскиваем элемент, а не только его содержимое. Чтобы справиться с этим, необходимо использовать следующий код CSS:

 
[draggable=true] { 
    -moz-user-select:none; 
    -webkit-user-select: none; 
    -webkit-user-drag: element; 
}

Для нашего удобства встроенный плагин drag-drop, который мы используем, устанавливает эти свойства для нас, поэтому мы можем не менять его, если хотим. Однако мы сделаем это:

1
2	[draggable=true] {
3	cursor : move;
4	}

Давайте начнем работать над оформлением:

 
html { 
    height:100%; 
} 
body { 
    background: #ececec; 
    margin:0; 
    padding:0; 
    font: 13px/1.5 helvetica, arial, san-serif; 
    height: 100%; 
} 
h1, h2 { text-align:center; } 
h2 { 
    position:absolute; 
    bottom: 20px; 
    color:#fff; 
    text-shadow:0 0 10px rgba(0, 0, 0, 0.75); 
    display:none; 
} 
p { margin:0; }

Поскольку мы не используем полный сброс стиля, вот наш псевдо-сброс. Все должно быть понятно. Мы устанавливаем высоту на знание 100% для элементов html и body, потому что мы хотим, чтобы #cart был на всю высоту экрана; для этого каждый родительский элемент должен иметь высоту, равную 100%. Также обратите внимание, что мы используем rgba для установки цвета тени; если браузер не поддерживает это, для элемента h2 не будет тени. И мы скроем этот h2, установив значение display: none. Помните, что h2 говорит "Бросьте сюда, чтобы добавить в корзину", так что мы должны будем его плавно скрыть, когда перетаскивание начнется и полностью убрать, когда закончится перетаскивание.

Переходим к нашему списку товаров…

 
#products { 
    float:left; 
    list-style:none; 
    width:65%; 
    padding:0; 
} 
#products li { 
    display:inline; 
}

Опять, тут всё понятно. Важным в этом фрагменте является то, что элементы списка будут отображаться в одну строчку. Поскольку мы установим свойства display: block; float: left для якорей, IE добавит к элементам списка эффект «лестничных ступеней»; мы можем обойти эту ошибку, установив свойство display: inline для родительского элемента.

Говоря о якорях, давайте продолжим их оформлять дальше.

 
.item { 
    display:block; 
    float:left; 
    width:180px; 
    height:180px; 
    margin:10px; 
    border:1px solid #494949; 
    text-align:center; 
    text-decoration:none; 
    color: #000; 
    overflow:hidden; 
} 
.item img { 
    border:0; 
    margin:10px auto; 
    width:160px; 
    height:160px; 
} 
.item div { 
    background:rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.5); 
    position:relative; 
    bottom:69px; 
    color:#f3f3f3; 
    padding:5px 0; 
    display:none; 
}

Каждый якорь будет оформлен как блок 180x180px; он будет заполнен изображением продукта. Слой с информацией о товаре будет размещён над изображением в нижней части квадрата. Обратите внимание, что мы должны установить цвет фона, а затем сбросить его для современных браузеров, потому что IE не поддерживает RGBa. Мы устанавливаем display: none для информационного слоя, чтобы мы могли его плавно скрыть и показать, когда "покупатель" наводит курсор и убирает его, соответственно.

Все, что осталось оформить, это корзина для покупок; мы рассмотрим её здесь, но, помните, элементы списка будут добавлены с помощью jQuery позже, так что вы пока не увидите, как это происходит.

 
#cart { 
    float:right; 
    background-color:#ccc; 
    width:25%; 
    padding:0 5%; 
    height:100%; 
} 
#cart ul { 
    padding:0; 
} 
#cart li { 
    list-style:none; 
    border-bottom:1px solid #494949; 
    padding:5px; 
} 
#cart .quantity { 
    font-weight:bold; 
    padding-right:10px; 
    margin-right:10px; 
    border-right:1px solid #494949; 
    display:inline-block; 
    width:15px; 
    text-align:right; 
} 
#cart .price { 
    float:right; 
} 
#total { 
    float:right; 
}

Элементы с классами оформления quantity и price будут находиться внутри динамически вставленных элементов списка.

Это для CSS; прежде чем перейти к звезде этого шоу, давайте посмотрим на проделанную работу.

Шаг 3. JavaScript

Мы добрались до JavaScript; согласно HTML5 doctor:

HTML 5 DnD основан на первоначальной реализации Microsoft, которая была доступна уже в Internet Explorer 5! В настоящее время поддерживается в IE, Firefox 3.5 и Safari 4.

Вот список событий, которые предлагает "Перетащи и Брось" в HTML5:

drag
dragstart
dragover
dragenter
dragleave
dragend
drop

Мы не будем использовать их все, но посмотрим, как они работают.

Сначала, мы поработаем с нашими продуктами:

 
$('.item') 
    .bind('dragstart', function (evt) { 
        evt.dataTransfer.setData('text', this.id); 
        $('h2').fadeIn('fast'); 
    }) 
    .hover( 
        function () { $('div', this).fadeIn(); },  
        function () { $('div', this).fadeOut(); } 
    );

Мы начинаем с выбора всех объектов; затем мы привяжем функцию к событию dragstart; это событие срабатывает, когда мы начнем перетаскивать объект. Первое, что мы будем делать при перетаскивании объекта, - это установим некоторые данные; на самом деле, если данные не установлены, firefox не позволит элементу перемещаться. Специальное перетаскивание событий - это свойство объекта в объекте события, называется dataTransfer; мы будем использовать два метода этого свойства: setData и getData. Здесь мы используем метод setData, который принимает два параметра: формат данных и данные. Мы будем использовать тип данных 'text.' Затем мы установим данные идентификатора элемента, который пользователь перетаскивает. Затем мы плавно покажем элемент h2 в качестве подсказки для клиента.

Мы также используем метод наведения jQuery для постепенного появления информации о продукте, когда мы наводим указатель мыши и исчезновения, когда мы отводим указатель мыши. Обратите внимание, что мы передаем узел, который мы зависаем как контекст, поэтому мы получаем только слой соответствующего продукта.

Теперь добавим обработчики событий для #cart. Мы будем взаимодействовать с событиями dragover, dragenter и drop:

 
$('#cart') 
    .bind('dragover', function (evt) { 
        evt.preventDefault(); 
    }) 
    .bind('dragenter', function (evt) { 
        evt.preventDefault(); 
    }) 
    .bind('drop', function (evt) { 
 
    });

Чтобы запустить событие drop, нам нужно отменить действие по умолчанию для события dragover; это событие непрерывно срабатывает при достижении цели перетаскивания, когда перетаскиваемый элемент перемещается по ней. Только для IE нам нужно отменить действие по умолчанию на dragenter event, которое происходит только тогда, когда элемент перетаскивания входит в целевую точку. Причины отмены действия по умолчанию несколько не конкретные; если честно, я их не понимаю. Вот что говорит Remy Sharp:

То, что сообщает браузеру, что этот элемент является тем, который мы хотим использовать в событии перетаскивания, это обычное действие перетаскивания. так, отменив это событие, он мы сообщаем браузеру, что это тот элемент, который должен начинаться перемещение.

Я должен отметить, что jQuery немного помогает нам здесь; обычно мы также должны возвращать значение return false, чтобы он работал в IE; однако исправленное предупреждение jQuery preventDefault делает это для нас.

Теперь событие drop; это событие также запускается для целевого объекта, которым является слой div#cart в нашем случае. Прежде чем мы посмотрим на функцию, давайте поговорим о том, что должна делать эта функция:

получить продукт, который мы бросили
если продукт уже куплен, добавить его к количеству купленного; в противном случае добавить товар в корзину
уменьшение количества продукта
обновить общую стоимость

Вот первая часть:

 
var id = evt.dataTransfer.getData('text'), 
    item = $('#' + id), 
    cartList = $("#cart ul"), 
    total = $("#total span"), 
    price = $('p:eq(1) span', item).text(), 
    prevCartItem = null, 
    notInCart = (function () { 
        var lis = $('li', cartList), 
            len = lis.length, 
            i; 
 
        for (i = 0; i < len; i++ ) { 
            var temp = $(lis[i]); 
            if (temp.data("id") === id) { 
                prevCartItem = temp; 
                return false; 
            } 
        } 
        return true; 
    } ()), 
    quantLeftEl, quantBoughtEl, quantLeft;

Я знаю; здесь много переменных, но мы будем использовать их все. Давайте разберёмся; во-первых, мы получаем текстовые данные, которые мы передали с событием; мы передали id таким образом, потому что в объекте события нет ничего, что сообщает нам, какой элемент был сброшен на нашу цель; мы получим идентификатор, а затем будем использовать его, чтобы найти элемент, который был перенесён. Далее мы получаем список корзины и блок с ценой. Затем мы получим цену отдельного товара; мы знаем, что это блок во втором абзаце элемента, поэтому мы можем использовать этот элемент в качестве параметра контекста. Мы установим prevCartItem на null, но мы будем использовать его, чтобы узнать, есть ли элемент, который мы перетаскиваем в корзину, в корзине. Значение notInCart - самозапускающаяся анонимная функция; она будет проверяться для каждого элемента в cartList (опять же, мы используем контекстный параметр) и проверяем, является ли id данных такими же, как идентификатор переменной id. Чтобы понять это, вам нужно будет знать, что когда мы добавим элементы списка в корзину покупок, мы будем использовать метод data jQuery для установки идентификатора продукта для элемента. В этой функции мы проверяем элемент списка с правильными данными; если мы найдем один, и элемент уже находится в корзине, поэтому мы устанавливаем значение notinCart в значение false; если он не находится в корзине, мы установим переменную в значение true. Наконец, мы будем использовать quantLeftEl, quantBoughtEl и quantLeft при обновлении количеств.

Теперь, оформим некоторые действия:

 
$("h2").fadeOut('fast'); 
 
if (notInCart) { 
    prevCartItem = $('<li />', { 
        text : $('p:first', item).text(), 
        data : { id : id } 
    }).prepend($('<span />', { 
        'class' : 'quantity', 
        text : '0' 
    })).prepend($('<span />', { 
        'class' : 'price', 
        text : price 
    })).appendTo(cartList); 
}

Во-первых, мы скроем уведомление элемента h2. Затем, если элемент не находится в корзине, мы добавим его в корзину. Для этого мы создадим элемент списка; затем мы можем передать литерал объекта в качестве второго параметра для задания свойств нашего нового элемента списка. Мы установим текст в название продукта; который берем из первого абзаца продукта. Затем мы устанавливаем данные, о которых говорилось выше.

Затем мы добавим блок к этому элементу списка; мы назначим ему класс ‘quantity’ (не забудьте поставить класс в кавычки, так как это зарезервированное слово) и установите текст на ноль; да, я знаю, что число должно быть единицей, поскольку они только что поместили товар в корзину, но мы добавим это позже ... и вы поймете, почему.

Мы добавим еще один блок к элементу списка, на этот раз время цены. Мы делаем обтекание цены справа, поэтому было бы логично добавить его; но это вызовет ошибку с обтеканием в IE; блок будет обтекать текст справа и под элементом списка.

Наконец, мы добавим элемент списка в список корзины покупок.

Последняя часть этой функции будет работать независимо от того, находится ли элемент в корзине или нет:

 
quantLeftEl = $('p:last span', item); 
quantLeft   = parseInt(quantLeftEl.text(), 10) - 1; 
quantLeftEl.text(quantLeft); 
quantBoughtEl = $('.quantity', prevCartItem); 
quantBoughtEl.text(parseInt(quantBoughtEl.text(), 10) + 1); 
 
if (quantLeft === 0) { 
    item.fadeOut('fast').remove(); 
} 
 
total.text((parseFloat(total.text(), 10) + parseFloat(price.split('$')[1])).toFixed(2)); 
 
evt.stopPropagation(); 
return false;

Сначала мы получим количество товара; это количество, оставшееся, после того как покупатель перетащит товар в корзину; мы получим количество, которое действительно осталось; но это строка, поэтому мы используем нативную функцию parseInt, чтобы преобразовать ее в число (используйте 10 в качестве основы для того, чтобы мы получили десятичное число) и вычтите единицу из него. Затем мы сбрасываем количество, используя метод jQuery text.

Затем мы получаем количество, покупок пользователя; это элемент с классом ‘quantity'; мы используем prevCartItem как контекст; это работает, потому что если элемент уже был в корзине, в этой анонимной функции был установлен prevCartItem; если его не было в корзине, мы устанавливаем его, когда мы создаем корзину. Затем мы можем установить текстовое значение, получив текущее значение, преобразуя его в число и добавив к нему единицу.

Что происходит, когда количество достигает нуля? Если он равен нулю, мы скроем элемент и удалим его.

Наконец, мы должны обновить общую цену. У нас есть блок с итоговой ценой, поэтому мы можем просто сбросить текст; что мы сейчас делаем, это получаем текущий текст, преобразуем его в число (на этот раз мы используем функцию parseFloat для сохранения центов), разделяем знак доллара с ценой и преобразуем его в число и добавляем к двум значениям. Наконец, мы используем функцию toFixed, чтобы убедиться, что мы всегда показываем правильное значение в центах.

Наконец, мы не хотим, чтобы событие drop drop наслаивалось, поэтому мы прекратим его и вернем значение return false;

Шаг 4. Завершенный проект

Отличная работа, мы закончили; вот обзор нашей корзины в действии:

Если вы хотите проверить, что делают другие события перетаскивания, добавьте это в ваш скрипт:

 
$('#cart').bind('dragleave', function (evt) { 
  console.log('dragleave'); 
}); 
 
$('.item') 
	.bind('dragend', function (evt) { 
		console.log('dragend'); 
	}) 
	.bind('dragstart', function (evt) { 
		console.log('dragstart'); 
	}) 
	.bind('drag', function (evt) { 
		console.log('drag'); 
	});

Хотя нативный HTML5 пока не готов к прайм-тайм (Opera не поддерживает его), определенно интересно узнать, куда всё движется!