HTML5 Seret dan Lepas
Seret dan Lepaskan
Seret dan lepas ialah ciri biasa di mana anda mengambil objek dan menyeretnya ke lokasi lain kemudian.
Dalam HTML5, seret dan lepas adalah sebahagian daripada standard dan mana-mana elemen boleh diseret dan digugurkan.
Contoh berkaitan:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5 drag & drop 拖拽与拖放测试</title>
<style>
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
<body>
<div class="dustbin"><br>垃<br>圾<br>箱</div>
<div class="dragbox">
<div class="draglist" title="拖拽我" draggable="true">列表1</div>
<div class="draglist" title="拖拽我" draggable="true">列表2</div>
<div class="draglist" title="拖拽我" draggable="true">列表3</div>
<div class="draglist" title="拖拽我" draggable="true">列表4</div>
<div class="draglist" title="拖拽我" draggable="true">列表5</div>
<div class="draglist" title="拖拽我" draggable="true">列表6</div>
</div>
<div class="dragremind"></div>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script>
var $ = function(selector) {
if (!selector) { return []; }
var arrEle = [];
if (document.querySelectorAll) {
arrEle = document.querySelectorAll(selector);
} else {
var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
if (lAll) {
var i = 0;
for (i; i<lAll; i+=1) {
if (/^\./.test(selector)) {
if (oAll[i].className === selector.replace(".", "")) {
arrEle.push(oAll[i]);
}
} else if(/^#/.test(selector)) {
if (oAll[i].id === selector.replace("#", "")) {
arrEle.push(oAll[i]);
}
}
}
}
}
return arrEle;
};
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
eleDrags[i].onselectstart = function() {
return false;
};
eleDrags[i].ondragstart = function(ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
eleDrags[i].ondragend = function(ev) {
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11205167-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>Tetapkan elemen sebagai boleh seret
Pertama, untuk menjadikan elemen boleh seret, tetapkan atribut boleh seret kepada benar:
<img draggable="true">
Apa yang hendak diseret - ondragstart dan setData()
Kemudian, nyatakan perkara yang berlaku apabila elemen itu diseret.
Dalam contoh di atas, atribut ondragstart memanggil fungsi, drag(event), yang menentukan data untuk diseret.
kaedah dataTransfer.setData() menetapkan jenis data dan nilai data yang diseret:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}Dalam contoh ini, jenis data ialah "Teks" dan nilainya ialah id bagi yang boleh diseret elemen ( "seret1").
Di mana hendak diletakkan - ondragover
Acara ondragover menentukan tempat untuk meletakkan data yang diseret.
Secara lalai, data/elemen tidak boleh diletakkan di dalam elemen lain. Jika kita perlu membenarkan peletakan, kita mesti menghalang pengendalian lalai bagi elemen tersebut.
Ini diletakkan dengan memanggil kaedah event.preventDefault() acara ondragover:
event.preventDefault()
- ondrop
Apabila data yang diseret digugurkan, peristiwa pengguguran akan berlaku.
Dalam contoh di atas, atribut ondrop memanggil fungsi, drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}Penjelasan kod:
Panggil preventDefault() untuk menghalang penyemak imbas daripada mengubah suai data Pemprosesan lalai (tingkah laku lalai acara lepas adalah untuk dibuka sebagai pautan)
Dapatkan data yang diseret melalui kaedah dataTransfer.getData("Teks"). Kaedah ini akan mengembalikan sebarang set data kepada jenis yang sama dalam kaedah setData().
Data yang diseret ialah id elemen yang diseret ("drag1")
Tambahkan elemen yang diseret pada elemen yang diletakkan (elemen sasaran)
Ringkasan mata pengetahuan yang berkaitan :
Objek Pemindahan Data: Medium yang digunakan untuk memindahkan objek jatuh, biasanya Event.dataTransfer.
atribut boleh seret: Elemen label mesti ditetapkan draggable=true, jika tidak, ia tidak akan memberi kesan, contohnya:
<div title="Seret saya" draggable="true"> ; senarai 1</div>
acara ondragstart: peristiwa dicetuskan apabila elemen yang diseret mula diseret. peristiwa dicetuskan apabila elemen seret bergerak pada elemen sasaran Peristiwa ini bertindak pada elemen sasaran
acara ondragover: Peristiwa dicetuskan apabila elemen seret bergerak pada elemen sasaran
Peristiwa ondrop: Peristiwa dicetuskan apabila elemen yang diseret berada pada elemen sasaran dan tetikus dilepaskan pada masa yang sama Peristiwa ini bertindak pada elemen sasaran
acara ondragend: Peristiwa itu dicetuskan apabila seretan selesai. Acara ini bertindak pada elemen seret Kaedah
Event.preventDefault() pada elemen: menghalang pelaksanaan beberapa kaedah acara lalai. PreventDefault() mesti dilaksanakan dalam ondragover, jika tidak, acara ondrop tidak akan dicetuskan. Di samping itu, jika anda menyeret sesuatu daripada aplikasi atau fail lain, terutamanya gambar, tindakan lalai adalah untuk memaparkan gambar atau maklumat berkaitan, dan sebenarnya tidak melaksanakan drop. Pada masa ini, anda perlu menggunakan acara ondragover dokumen untuk membunuhnya secara langsung.
Event.effectAllowed property: Ia ialah kesan seretan.
