Rumah > Artikel > hujung hadapan web > Melaksanakan kesan drag-and-drop dalam HTML5 tanpa menggunakan teknik tutorial javascript_html5
Melaksanakan kesan drag-and-drop dalam HTML5 tanpa menggunakan teknik tutorial javascript_html5
- WBOYasal
- 2016-05-16 15:50:371212semak imbas
Dalam pembangunan web, jika kita ingin mencapai kesan drag-and-drop, kita perlu menggunakan Javascript. Hari ini mari kita gunakan Html5 untuk melaksanakannya:
Lihat kod teras html dahulu:
Salin kod
Kodnya adalah seperti berikut:Seret petak kuning kecil ke dalam kotak merah besar
/div>Atribut boleh seret baru ditambahkan dalam HTML5. Ia mempunyai tiga nilai: benar, salah dan auto bermakna boleh seret, maksud salah Auto bergantung pada sama ada penyemak imbas pengguna menyokongnya. Untuk maklumat lanjut, sila rujuk dokumentasi rasmi
Tambah sedikit gaya
Salin kod
Kod adalah seperti berikut:
Kemudian mari lihat javascript
: >
Salin kod
Kod tersebut adalah seperti berikut:
function listenEvent(eventTarget, eventType, eventHandler ) {
jika (eventTarget .addEventListener) {
eventTarget.addEventListener(eventType, eventHandler,false); >eventTarget.attachEvent(eventType, eventHandler );
} else { Kemudian mari lihat javascript
: >
Salin kod
Kod tersebut adalah seperti berikut:
function listenEvent(eventTarget, eventType, eventHandler ) {
jika (eventTarget .addEventListener) {
eventTarget.addEventListener(eventType, eventHandler,false); >eventTarget.attachEvent(eventType, eventHandler );
eventTarget["on" eventType] = eventHandler; } }
// membatalkan acara
acara) {
jika ( event.preventDefault) {
jika (event.stopPropagation) { event.preventDefault(); } lain { event.returnValue = false; } // batalkan perambatan
fungsi cancelPropagation ( acara) { event.stopPropagation();
} else {
event.cancelBubble = benar; 🎜>}
tetingkap. onload=function() {
var target = document.getElementById("drop"); "dragover", dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer. dropEffect = 'copy';
var id = evt.dataTransfer.getData("Text"); document.getElementById("item") ;
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || .event;
evt. dataTransfer.effectAllowed = 'salinan'; (evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt ||
evt.dataTransfer.dropEffect = 'copy';
}
Daripada kod di atas, kita melihat penggunaan set seret dan lepas Acara yang disediakan oleh HTML5 Mari kita lihat terus perkara berikut:
seret mula
Acara seret bermula.
seret
Semasa operasi seret
Seret melepasi sasaran; tentukan maklum balas kepada pengguna. Js di atas tidak sukar untuk difahami.
Anda boleh mencubanya sendiri pada masa ini Opera mempunyai sokongan terbaik, tetapi IE tidak berfungsi dengan baik.
Semoga ia akan membantu pembangunan web anda
} else {
event.cancelBubble = benar; 🎜>}
tetingkap. onload=function() {
var target = document.getElementById("drop"); "dragover", dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer. dropEffect = 'copy';
var id = evt.dataTransfer.getData("Text"); document.getElementById("item") ;
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || .event;
evt. dataTransfer.effectAllowed = 'salinan'; (evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt ||
evt.dataTransfer.dropEffect = 'copy';
}
Daripada kod di atas, kita melihat penggunaan set seret dan lepas Acara yang disediakan oleh HTML5 Mari kita lihat terus perkara berikut:
seret mula
Acara seret bermula.
seret
Semasa operasi seret
Seret melepasi sasaran; tentukan maklum balas kepada pengguna. Js di atas tidak sukar untuk difahami.
Anda boleh mencubanya sendiri pada masa ini Opera mempunyai sokongan terbaik, tetapi IE tidak berfungsi dengan baik.
Semoga ia akan membantu pembangunan web anda
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn