Seret dan drop adalah bagian dari standar HTML5.
Dukungan Browser
Internet Explorer 9, Firefox, Opera 12, Chrome, dan Safari 5 Dukungan Drag and Drop.
Elemen Seret, DragElement:
1. Tambahkan Acara: OnDragStart 2. Tambahkan Atribut: DitarikElemen tempat, dropelement:
1. Tambahkan Acara: Ondargenter, Ondragover, Ondragleave, Ondragend, OnDrop
Ini mirip dengan insiden mouser ke dalam klasifikasi, dan itu dipahami dengan baik.
1. Seret dan jatuhkan antar elemen pada halaman
Mari kita gunakan contoh kecil di bawah ini, drag dan drop antara div ditampilkan, bagaimana setiap peristiwa dipicu:
<! src = ../../jQuery-1.8.3.js type = text/javascript charset = utf-8> </script> <script type = text/javascript>/*** drag (seret dan lepas) adalah. Komponen standar HTML5. * Dukungan Browser* Internet Explorer 9, Firefox, Opera 12, Chrome, dan Safari 5 Dukungan Drag and Drop. * / $ (fuins () {$ (#dragele) [0] .ondragStart = function (event) {console.log (drawStart); event.datatransfer.setData (text, event.target.id);}; /* * * Ketika data seret ditempatkan, acara drop terjadi. p] + @@);} * / console.log (oncrop); ) .d (Div) .length))); ;} $ (#Dropele) [0] .ondragleave = function (event) {console.log (cuti oncrop) head> <body> div style = border: 1px solid red; : 330PX;Anda perlu memperhatikan:
A. Ontragover harus mengatur perilaku default dari acara tersebut.
B. Perilaku default acara drop dibuka di tautan, sehingga juga perlu mencegah perilaku defaultnya.
Dimungkinkan juga untuk memperhatikan bahwa saat menyeret dan menjatuhkan, acara ini berisi suatu peristiwa. Datatransfer objek. , dan salin.
Berikut adalah metode lain dari objek:
Event.DataTransfer:
item = [objek DataTransFernTemlist] @@ drag_drop.html: 44
File = [FileList objek] @@ drag_drop.html: 44
Type = text/polos @@ drag_drop.html: 44
EFFECTALOWED = all @@ drag_drop.html: 44
Dropeffect = none @@ drag_drop.html: 44
cleartata = function cleanata () {[kode asli]} @@ drag_drop.html: 44
getData = fuory getData () {[kode asli]} @@ drag_drop.html: 44
setData = function setData () {[kode asli]} @@ drag_drop.html: 44
setDragimage = function setDragimage () {[kode asli]} @@
Saya menggunakan JS untuk mencetak semua atributnya:
1. GetData, contoh setData telah digunakan dalam contoh di atas, clearData adalah untuk menghapus data pengaturan.
2. Perlu dicatat file itu.
3. SetDragimage (Image, X, Y) digunakan untuk mengatur rendering bergerak dengan mouse selama gerakan tikus. Harus diatur di DragStart.
4. Jenis, Efek, dan Dropffect adalah jenis seret ke dalam elemen.
Di atas adalah semua isi artikel ini.