Плъзнете и пуснете в HTML - Пример за изпълнение на влачене и пускане в HTML

• Въведение в влачене и пускане в HTML
• 
Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Въведение в влачене и пускане в HTML

Плъзгане и пускане вече са една от най-новите функции, включени в HTML. Плъзгане и пускане е процес, който започва, когато потребителят избере драгируем елемент и постави този елемент в компонента, който може да се пусне и го постави на определеното място. Той използва модела на събитията Document Object Model (DOM), както и някои събития на влачене, които идват от събития на мишката. Той работи като най-мощният интерфейс, който отговаря за копирането, записването, изтриването на елементи с помощта на мишка. В най-новия HTML функционалността „Drag and Drop“ работи върху най-новите събития като dragstart, dragend като тях ще се използват много други събития.

Събития за влачене и пускане

Има най-различни събития, включени в най-новата функция за плъзгане и пускане (dnd), да видим едно по едно, както следва:

Нека да видим някои атрибути на данни, върху които ще се случи операция за влачене и пускане:

1. dataTransfer.dropEffect (= стойност): Този атрибут се използва за показване на коя операция в момента става. човек може да го настрои да замени вече избраната операция. Стойностите, включени в него като копие, връзка, няма или преместване.

2. dataTransfer.effectAllowed (= стойност): Който от операциите са разрешени, които ще бъдат върнати чрез този атрибут. Възможно е също така да настроите, за да промените вече избраната операция.

3. dataTransfer.files: Този атрибут на данни, използван за получаване на fileList на файловете, които ще бъдат изтеглени.

4. dataTransfer.addElement (елемент): Използва се за вмъкване на вече съществуващия елемент в списък с други елементи, които са полезни за представяне на обратната връзка при влачене.

5. dataTransfer.setDragImage (елемент, x, y): Този атрибут малко съвпада с горния за актуализиране на обратна връзка при влачене и помощ за промяна на вече съществуваща обратна връзка

6. dataTransfer.clearData ((формат)): помага на потребителя да премахне данни от вече дефинирания формат. Ако потребителят пропусна аргумента, ИТ ще премахне всички данни.

7. dataTransfer.setData (формат, данни): Това е един от популярните атрибути, използвани за добавяне на определени данни.

8. data = dataTransfer.getData (формат): Този атрибут в операция Drag and Drag, използван за извличане на определени данни. В случай, че няма същите данни като него, то ще се върне към празния низ

Синтаксис на влачене и пускане в HTML

Ето няколко стъпки, определящи синтаксиса за плъзгане и пускане:

Изберете обекта, който ще бъде атрибут drag: set, верен на него.

Започнете да влачите обект:

function dragStart(ev)()

Пуснете обекта:

function dragDrop(ev)()

Примери за влачене и пускане в HTML

Следващият пример ще покаже как точно ще се извърши операцията за влачене и пускане в HTML:

Пример №1

Код:


Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO






Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Изход: Преди опцията за плъзгане и пускане изходът ще бъде както е показано по-долу:

След извършване на операция за влачене и пускане изходът ще бъде както:

Пример №2

Тук ще видим друг пример, в който ще преместим изображението от едно място на друго определено място, както е показано по-долу код:

Код:



function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

.divfirst (
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
)
p (
font-size:20px;
font-weight:bold;
)



Демонстрация на влачене и пускане на изображение