本文给大家介绍HTML5新增属性中的拖拽属性，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
HTML5新增的许多属性：
o 文件类型声明（1a309583e26acea4f04ca31122d8c535）仅有一型：fef50554eca1a427827adaa329da8122。
o 新的解析顺序：不再基于SGML。
o 新的元素：section, video, progress,nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption,figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source,summary, wbr。
o input元素的新类型：date,email, url等等。
o 新的属性：ping（用于a与area）,charset（用于meta）, async（用于script）。
o 全域属性：id, tabindex, repeat。
o 新的全域属性：contenteditable,contextmenu, draggable, dropzone, hidden, spellcheck。
o 移除元素：acronym, applet,basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike,tt。
下面我们就可是介绍HTML5新增属性中的拖拽属性吧。
DataTransfer对象：拖拽对象用来传递的媒介，一般为Event.dataTransfer
Draggable属性: 顾名思义，被拖拽的元素需要设置draggable=true,否则不会有效果
<p draggable =’true’></p>
DataTransfer属性和类型
dropEffect |
String |
|
effectAllowed |
String |
|
files |
FileList |
|
mozCursor |
String |
|
mozItemCount |
Unsigned long |
|
mozSourceNode |
Node |
|
mozUserCancelled |
Boolean |
|
types |
DOMStringList |
|
ondragstart 事件: 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖拽元素上
ondragenter事件：当拖拽元素进入目标元素时候触发的事件，此事件作用在目标元素上
ondragover事件：当拖拽元素穿过目标元素时候触发的事件，此事件作用在目标元素上
ondrop事件：当拖拽元素在目标元素上同时放开鼠标时触发的时候，此事件作用在目标元素上
ondragend事件：当拖拽完成时触发的事件，此事件作用在被拖拽元素上
Event.preventDefault() 方法：阻止默认事件方法等的执行。在ondrop中一定要执行preventDefault，否则ondrop事件不会被触发。另外，如果是从其他应用软件或者文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或者是相关信息，并不是真的执行drop。此时需要用document的ondragover事件替代
Event.effectAllowed 属性：拖拽效果，取值有：
None，copy，copyLink，copyMove，link，linkMove，move，all，uninitialized(default)
值 |
含义 |
None |
该项目不允许被drop |
copy |
源项目的复制项可能会出现在新的位置 |
copyLink |
允许copy或者link操作 |
copyMove |
允许copy或者move操作 |
link |
可以在新的地方建立与源的链接 |
linkMove |
允许link或者move操作 |
move |
一个项目可能被移动到新的位置 |
All |
允许所有操作 |
事件触发顺序
ondragstart->ondragenter->ondragover->ondrop->ondragend
Demo
box从右边拖到container中后，box在右边消失，container中添加了被拖拽的box。
右边的box是可排序的。
代码
6c04bd5ca3fcae76e30b72ad730ca86d e8f5c74c2e445a663d1be11ec1ea30fb container 94b3e26ee717c64999d7867364b1b4a3 91bedac68f6d1078f3d401f10624e4e2 08bf1995faf7e7dfc6a9ad686856d843box-194b3e26ee717c64999d7867364b1b4a3 08bf1995faf7e7dfc6a9ad686856d843box-294b3e26ee717c64999d7867364b1b4a3 08bf1995faf7e7dfc6a9ad686856d843box-394b3e26ee717c64999d7867364b1b4a3 08bf1995faf7e7dfc6a9ad686856d843box-494b3e26ee717c64999d7867364b1b4a3 08bf1995faf7e7dfc6a9ad686856d843box-594b3e26ee717c64999d7867364b1b4a3 08bf1995faf7e7dfc6a9ad686856d843box-694b3e26ee717c64999d7867364b1b4a3 08bf1995faf7e7dfc6a9ad686856d843box-794b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 b13ede5d26a8f6be7a7588d9a8f04d9d 36cc49f0c466276486e50c850b7e4956
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var container = document.getElementsByClassName('container')[0];
var boxList = document.getElementsByClassName('boxList')[0];
var boxes = document.getElementsByClassName('box');
var listLength = boxes.length;
var targetDropEle=null;
(function () {
for(let i=0;i67818f2b583fb0f32c71c986e9931677
还看到了一些html5的新属性就写在文章末尾吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.userInfo{
color: red;
}
.userInfo :hover{
color: transparent;
}
.userInfo:hover:after{
content: attr(data-hover-response);
color: black;
}
</style>
</head>
<body>
<!--data-***-->
<!--符合html5的规范-->
<!--js提供dataset方法-->
<!--css提供attr()方法-->
<!--<div userid = "6666" name="hugo"></div>-->
<div id ="user" data-userid="6666" data-hover-response="see I am changed" data-name="hugo" data-date-of-birthday>Fiona</div>
<!--datalist-->
browsers:<input list="browsers">
<datalist id="browsers">
<option value="chrome"></option>
<option value="fireFox"></option>
<option value="IE"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
<!--download属性：表明资源是让用户下载的而不是立即显示的。download的值就是文件名-->
<div style="margin-top: 20px">
<a href="1-160F6160T7.jpg" download="kitty.jpg"> download with download </a>
<a href="1-160F6160T7.jpg" style="margin-left: 20px"> download without download </a>
</div>
<!--下载动态生成的文件，通bob创建二进制文件，然后用这个属性下载到本地-->
<!--autofocus 页面加载时自动获得焦点，仅对于input, button, textarea等表单元素有效，多个autofocus存在时候，作用与第一个-->
<div style="margin-top: 20px">
<input>
<button autofocus="autofocus">click me</button>
<textarea autofocus="autofocus"></textarea>
<input autofocus="autofocus">
</div>
<!--placeholder-->
<div style="margin-top: 20px">
<input placeholder="use rname">
</div>
<!--menu目前chrome safari不支持-->
<div>
<menu type="context" id="mymenu">
<menuitem label="fresh post"></menuitem>
<menuitem label="skip to moment"></menuitem>
<menuitem label="share to...">
<menuitem label="facebook"></menuitem>
<menuitem label="twitter"></menuitem>
</menuitem>
</menu>
</div>
</body>
<script>
var user = document.getElementById("user");
//驼峰的写法
user.dataset.dateOfBirthday = "1992-04-04"
user.dataset.englishName = "Fiona"
// <!--下载动态生成的文件，通bob创建二进制文件，然后用这个属性下载到本地-->
var blob = new Blob(["hello world I am content "]);//文本内容
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello world.txt";
a.textContent = "download hello world"
document.body.appendChild(a)
</script>
</html>总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！
相关推荐：
Atas ialah kandungan terperinci HTML5新增属性之拖拽属性（介绍）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Contoh Kod H5: Aplikasi Praktikal dan TutorialApr 25, 2025 am 12:10 AMH5 menyediakan pelbagai ciri dan fungsi baru, sangat meningkatkan keupayaan pembangunan front-end. 1. Sokongan Multimedia: Media Media Melalui dan Elemen, Tiada Plug-Ins diperlukan. 2. Kanvas: Gunakan elemen untuk menjadikan grafik dan animasi 2D secara dinamik. 3. Penyimpanan Tempatan: Melaksanakan penyimpanan data berterusan melalui LocalStorage dan sessionStorage untuk meningkatkan pengalaman pengguna.
Sambungan antara H5 dan HTML5: Persamaan dan PerbezaanApr 24, 2025 am 12:01 AMH5 dan HTML5 adalah konsep yang berbeza: HTML5 adalah versi HTML, yang mengandungi unsur -unsur baru dan API; H5 adalah rangka kerja pembangunan aplikasi mudah alih berdasarkan HTML5. HTML5 Parses dan membuat kod melalui pelayar, manakala aplikasi H5 perlu menjalankan bekas dan berinteraksi dengan kod asli melalui JavaScript.
Blok bangunan kod H5: elemen utama dan tujuan merekaApr 23, 2025 am 12:09 AMUnsur -unsur utama HTML5 termasuk ,,,,,, dan lain -lain, yang digunakan untuk membina laman web moden. 1. Tentukan kandungan kepala, 2.
HTML5 dan H5: Memahami Penggunaan BiasaApr 22, 2025 am 12:01 AMTidak ada perbezaan antara HTML5 dan H5, iaitu singkatan HTML5. 1.HTML5 adalah versi kelima HTML, yang meningkatkan fungsi multimedia dan interaktif laman web. 2.H5 sering digunakan untuk merujuk kepada laman web atau aplikasi mudah alih berasaskan HTML5, dan sesuai untuk pelbagai peranti mudah alih.
HTML5: Blok Bangunan Web Moden (H5)Apr 21, 2025 am 12:05 AMHTML5 adalah versi terkini bahasa markup hiperteks, yang diseragamkan oleh W3C. HTML5 memperkenalkan tag semantik baru, sokongan multimedia dan peningkatan bentuk, meningkatkan struktur web, pengalaman pengguna dan kesan SEO. HTML5 memperkenalkan tag semantik baru, seperti,, dan lain -lain, untuk menjadikan struktur laman web lebih jelas dan kesan SEO lebih baik. HTML5 menyokong elemen multimedia dan tiada pemalam pihak ketiga diperlukan, meningkatkan pengalaman pengguna dan kelajuan memuatkan. HTML5 meningkatkan fungsi bentuk dan memperkenalkan jenis input baru seperti, dan lain -lain, yang meningkatkan pengalaman pengguna dan membentuk kecekapan pengesahan.
Kod H5: Menulis HTML5 Bersih dan CekapApr 20, 2025 am 12:06 AMBagaimana cara menulis kod HTML5 yang bersih dan cekap? Jawapannya adalah untuk mengelakkan kesilapan biasa dengan tag semantik, kod berstruktur, pengoptimuman prestasi dan mengelakkan kesilapan biasa. 1. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Pastikan kod berstruktur dan boleh dibaca, menggunakan lekukan dan komen yang sesuai. 3. Mengoptimumkan prestasi dengan mengurangkan tag yang tidak perlu, menggunakan CDN dan kod pemampatan. 4. Elakkan kesilapan biasa, seperti tag tidak ditutup, dan pastikan kesahihan kod.
H5: Bagaimana ia meningkatkan pengalaman pengguna di webApr 19, 2025 am 12:08 AMH5 meningkatkan pengalaman pengguna web dengan sokongan multimedia, penyimpanan luar talian dan pengoptimuman prestasi. 1) Sokongan multimedia: H5 dan Elemen Memudahkan pembangunan dan meningkatkan pengalaman pengguna. 2) Penyimpanan Luar Talian: WebStorage dan IndexedDB membenarkan penggunaan luar talian untuk meningkatkan pengalaman. 3) Pengoptimuman Prestasi: Pekerja web dan elemen mengoptimumkan prestasi untuk mengurangkan penggunaan jalur lebar.
Dekonstruktur Kod H5: Tag, Elemen, dan AtributApr 18, 2025 am 12:06 AMKod HTML5 terdiri daripada tag, elemen dan atribut: 1. Tag mentakrifkan jenis kandungan dan dikelilingi oleh kurungan sudut, seperti. 2. Unsur terdiri daripada tag permulaan, kandungan dan tag akhir, seperti kandungan. 3. Atribut menentukan pasangan nilai utama dalam tag permulaan, meningkatkan fungsi, seperti. Ini adalah unit asas untuk membina struktur web.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
