Главная » Все про HTML » Перетаскивание изображения – использование Drag and Drop в html 5

Перетаскивание изображения – использование Drag and Drop в html 5

2017-05-18 / Вр:11:49 / просмотров: 12638

Всем привет!
Думал я, что уже все знаю про html 5, но я круто ошибался.
Нашел в интернете несколько статей, как сделать перетаскивание изображения, используя html 5.
Не знаю, получится ли у меня доходчиво все рассказать. Искал в интернете материал, чтобы разобраться, но, увы – хорошей подачи не нашел. Поэтому решили сам написать, а уж как это у меня получилось, пишите в комментариях.

Перетаскивание изображения - использование Drag and Drop в html 5

Итак, с помощью технологии drag and drop (drag'n'drop) вы можете сделать все элементы на вашем сайте перетаскиваемыми (картинки, текст, блоки и т.д.).
Раньше такой эффект можно было реализовать с помощью JavaScript функций или подключением jQuery. Теперь все изменилось, так как перетаскивание элементов на веб-странице можно сделать на HTML5 намного быстрее и проще.

Итак, ознакомьтесь со специальными событиями для перетаскивания, которые были добавлены в HTML5:

Событие	Описание
dragstart	Выполнится в начале операции перетаскивания
ondrag	Выполнится во время перетаскивания элемента
ondragenter	Выполнится когда перетаскиваемый элемент будет наведен на элемент, который может его принять
ondragleave	Выполнится когда перетаскиваемый элемент будет выведен за пределы границ элемента, который может его принять
ondragover	Выполнится когда перетаскиваемый элемент будет перемещаться в пределах границ элемента, который может его принять
ondrop	Выполнится когда перетаскиваемый элемент будет перемещен в принимающий его элемент
ondropend	Выполнится в конце операции перетаскивания

Теперь попробуем все события использовать на практике.

1 этап – поле для перетаскивания

Для начала создадим блок, куда будем перетаскивать элементы:

<div id="box"></div>

Как видите, к блоку я прописал «id» с именем «box». Это не принципиально, но чтобы у вас не было лишних вопросов, делайте все также.

К этому же блоку нужно прописать события:

 ondragenter="название_функции1(event)" ondrop="название_функции2(event)" ondragover=" название_функции3(event)"

Какие мы использовали события?

- ondragenter – выполнится, когда перетаскиваемый элемент будет наведен на элемент, который может его принять;
- ondrop – выполнится, когда перетаскиваемый элемент будет перемещен в принимающий его элемент;
- ondragover – выполнится, когда перетаскиваемый элемент будет перемещаться в пределах границ элемента, который может его принять.

Вот полный пример:

<div id="box" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)"></div>

Чтобы поле для перетаскивания было видно нашему глазу, пропишем в CSS парочку стилей:

#box {
width: 550px; /* ширина блока*/
height: 200px; /* высота блока*/
border: 2px dotted black; /* рамка блока*/
background-color: #ccc; /* фон блока*/
padding:10px; /* отступы внутри блока*/
}

Результат:

Перетаскивание изображения - использование Drag and Drop в html 5

2 этап – элементы для перетаскивания

Элементами для перетаскивания у меня будут изображения:

<img src=" icon-php.jpg" id="img1">
<img src= "icon-css.jpg" id="img2">

Обратите внимание, что для каждой картинки я прописал уникальное id, так должны сделать и вы.
Пропишите для каждой картинки событие:

draggable="true" ondragstart="название_функции(event)"

Какие мы использовали события?

- draggable – это атрибут, который устанавливает возможность перетаскивать элемент.
«draggable» имеет два значения:
true - данный элемент можно перетаскивать
false - данный элемент запрещено перетаскивать
- ondragstart – выполняется, когда объект перетаскивания начался (пользователь нажал кнопку мыши и начал перетаскивать объект).

Полный пример:

<img src="icon-php.jpg" id="img1" draggable="true" ondragstart="dragStart(event)"/>
<img src="icon-css.jpg" id="img2" draggable="true" ondragstart="dragStart(event)"/>

Результат:

Перетаскивание изображения - использование Drag and Drop в html 5

3 этап – обработка элемента во время перетаскивания
Вставьте вот такой JavaScript код:

<script>
<!-- для элементов, которые будут перетаскиваться -->
function dragStart(e) {
e.dataTransfer.setData("text/plain",e.target.id);
}

<!-- для поля перетаскивания -->
function dragEnter(e) {
event.preventDefault();
return true;
}

function dragDrop(e) {
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
}

function dragOver(e) {
event.preventDefault();
}
</script>

Все, готово! Смотрите на результат (перетащите картинку в серый прямоугольник):

[ смотреть результат ]

Весь код:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Пример Drag and Drop в HTML 5</title>
<style>
#box {
width: 550px; /* ширина блока*/
height: 200px; /* высота блока*/
border: 2px dotted black; /* рамка блока*/
background-color: #ccc; /* фон блока*/
padding:10px; /* отступы внутри блока*/
}
</style>

<script>
<!-- для элементов, которые будут перетаскиваться -->
function dragStart(e) {
e.dataTransfer.setData("text/plain",e.target.id);
}

<!-- для поля перетаскивания -->
function dragEnter(e) {
event.preventDefault();
return true;
}

function dragDrop(e) {
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
}

function dragOver(e) {
event.preventDefault();
}
</script

</head>
<body>
<img src="icon-php.jpg" id="img1" draggable="true" ondragstart="dragStart(event)"/>
<img src="icon-css.jpg" id="img2" draggable="true" ondragstart="dragStart(event)"/>

<div id="box" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)"></div>
</body>
</html>

Все хорошо, но как вернуть картинки (элемент) назад?
Чтобы была возможность возвращать картинки (элемент) назад на исходную, я обернул «div» все перетаскиваемые картинки с такими же событиями и названиями функций, как и для «поля для перетаскивания»:

<div id="section" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)">
...тут картинки, которые перетаскиваются…
</div>

Пример:

<div id="section" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)">
<img src=" icon-php.jpg" id="img1" draggable="true" ondragstart="dragStart(event)"/>
<img src= "icon-css.jpg" id="img2" draggable="true" ondragstart="dragStart(event)"/>
</div>

Для красоты можно прописать в CSS стиль:

#section
{
width: 550px; /* ширина блока*/
margin:10px 0; /* отступы от блока*/
padding:10px; /* отступы внутри блока*/
border: 2px dotted black; /* рамка блока*/
}

Весь код:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Пример Drag and Drop в HTML 5</title>
<style>
#box {
width: 550px; /* ширина блока*/
height: 200px; /* высота блока*/
border: 2px dotted black; /* рамка блока*/
background-color: #ccc; /* фон блока*/
padding:10px; /* отступы внутри блока*/
}

#section
{
width: 550px; /* ширина блока*/
margin:10px 0; /* отступы от блока*/
padding:10px; /* отступы внутри блока*/
border: 2px dotted black; /* рамка блока*/
}
</style>

<script>
<!-- для элементов, которые будут перетаскиваться -->
function dragStart(e) {
e.dataTransfer.setData("text/plain",e.target.id);
}

<!-- для поля перетаскивания -->
function dragEnter(e) {
event.preventDefault();
return true;
}

function dragDrop(e) {
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
}

function dragOver(e) {
event.preventDefault();
}
</script

</head>
<body>
<div id="section" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)">
<img src=" icon-php.jpg" id="img1" draggable="true" ondragstart="dragStart(event)"/>
<img src= "icon-css.jpg" id="img2" draggable="true" ondragstart="dragStart(event)"/>
</div>

<div id="box" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)"></div>
</body>
</html>

В результате:

Перетаскивание изображения - использование Drag and Drop в html 5

А вам же хочется посмотреть на живой результат? Попробуйте по перетаскивать картинки с одного поля в другое и назад на исходную.

[ смотреть результат ]

Можно немного пофантазировать и сделать еще вот так:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Пример Drag and Drop в HTML 5</title>
<style>
td {
width: 64px;
height: 64px;
}

#box {
width: 550px;
height: 200px;
border: 2px dotted black;
background-color: #ccc;
padding:10px;
}
#section
{
width: 550px;
margin:10px 0;
display: inline-table;
}
</style>

<script>
<!-- для элементов, которые будут перетаскиваться -->
function dragStart(e) {
e.dataTransfer.setData("text/plain",e.target.id);
}

<!-- для поля перетаскивания -->
function dragEnter(e) {
event.preventDefault();
return true;
}

function dragDrop(e) {
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
}

function dragOver(e) {
event.preventDefault();
}
</script>

</head>
<body>
<div id="section" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)">
<table border="1">
<tr>
<td><img src="f1.png" id="img1" draggable="true" ondragstart="dragStart(event)"/></td>
<td><img src="f2.png" id="img2" draggable="true" ondragstart="dragStart(event)"/></td>
<td><img src="f3.png" id="img3" draggable="true" ondragstart="dragStart(event)"/></td>
<td><img src="f4.png" id="img4" draggable="true" ondragstart="dragStart(event)"/></td>
<td><img src="f5.png" id="img5" draggable="true" ondragstart="dragStart(event)"/></td>
<td><img src="f6.png" id="img6" draggable="true" ondragstart="dragStart(event)"/></td>
<td><img src="f7.png" id="img7" draggable="true" ondragstart="dragStart(event)"/></td>
<td><img src="f8.png" id="img8" draggable="true" ondragstart="dragStart(event)"/></td>
</tr>
</table>
</div>

<div id="box" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)"></div>
</body>
</html>

Вам, наверное, не терпится увидеть результат:

[ смотреть результат ]

Это все, что я хотел рассказать о перетаскивании элементов с помощью HTML5.
Попробуйте поискать дополнительно информацию в интернете.
Всем удачи!