HTML дээр дурын элементийг чирж унагаж болно.
Drag and Drop (Чирэх болон Унагах) #
Чирэх, унагах нь маш нийтлэг шинж чанар юм. Энэ нь объектыг “барьч” аваад өөр газар руу чирэх явдал юм.
Хөтөчийн дэмжлэг #
The numbers in the table specify the first browser version that fully supports Drag and Drop.
| API | chrome | internet explorer | mozila | safari | opera |
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop-ийн Жишээ #
Доорх жишээ нь энгийн чирэх болон унагах жишээ юм:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html> Энэ нь төвөгтэй мэт санагдаж болох боловч чирэх, унах үйл явдлын бүх өөр хэсгүүдийг авч үзье.
Элементийг чирэх боломжтой болгох #
Юуны өмнө: Элементийг чирэх боломжтой болгохын тулд draggable шинж чанарийг true болгох:
<img draggable="true">
Юуг чирэх вэ – ondragstart ба setData () #
Дараа нь элементийг чирэхэд юу болох ёстойг зааж өгнө.
Дээрх жишээнд ondragstart атрибут нь ямар өгөгдлийг чирэхийг зааж өгсөн функц, drag (event) гэж нэрлэдэг.
dataTransfer.setData() арга нь өгөгдлийн төрөл ба чирэгдсэн өгөгдлийн утгыг тохируулдаг.
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
} Хаана унагах вэ – ondragover #
ondragover event нь чирэгдсэн өгөгдлийг хаана унагаж болохыг зааж өгдөг.
Үндсэн тохиргоогоор өгөгдөл / элементүүдийг бусад элементүүдэд хаях боломжгүй. Уналтыг зөвшөөрөхийн тулд элементийг үндсэн тохиргоогоор боловсруулахаас урьдчилан сэргийлэх хэрэгтэй.
Үүнийг ondragover үйл явдлын event.preventDefault() аргыг дуудаж гүйцэтгэнэ.
event.preventDefault()
Унагах-ondrop #
Чирсэн өгөгдлийг унагахад унах үйл явдал тохиолддог.
Дээрх жишээнд ondrop шинж чанар нь функц, drop (event) дууддаг:
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
} Код тайлбарлав:
- Хөтөч өгөгдөлтэй анхдагч харьцахаас урьдчилан сэргийлэхийн тулд preventDefault () руу залгана уу (өгөгдмөл унах холбоос хэлбэрээр нээлттэй байна)
DataTransfer.getData () аргаар чирсэн өгөгдлийг авах. Энэ арга нь setData () аргын ижил төрөлд тохируулсан өгөгдлийг буцааж өгөх болно - Чирэгдсэн өгөгдөл нь чирэгдсэн элементийн id (“drag1”)
- Чирэгдсэн элементийг унах элемент рүү хавсаргах
