Melaksanakan kesan drag-and-drop dalam HTML5 tanpa menggunakan teknik tutorial javascript

Melaksanakan kesan drag-and-drop dalam HTML5 tanpa menggunakan teknik tutorial javascript_html5

WBOY

Lepaskan： 2016-05-16 15:50:37

asal

1206 orang telah melayarinya

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 {
eventTarget["on" eventType] = eventHandler; } }
// membatalkan acara
acara) {

jika ( event.preventDefault) {

event.preventDefault(); } lain { event.returnValue = false; } // batalkan perambatan

fungsi cancelPropagation ( acara) {

jika (event.stopPropagation) {

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

Label berkaitan：

seret dan lepas

sumber：php.cn

Artikel sebelumnya：css3 transform 3d Gunakan css3 untuk mencipta kiub 3d dinamik (latihan HTML5)_html5 kemahiran tutorial Artikel seterusnya：Langkah dan kod pelaksanaan untuk memainkan video dan tangkapan skrin dinamik dalam html5 (menyokong safari dan kemahiran tutorial lain yang belum diuji)_html5

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang