html5规定元素是否可拖动的属性draggable
实例
一个可拖动的段落：
<p draggable="true">这是一个可拖动的段落。</p>
浏览器支持
IE
Firefox
Chrome
Safari
Opera
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。
注释：Internet Explorer 8 以及更早的版本，不支持 draggable 属性。
定义和用法
draggable 属性规定元素是否可拖动。
提示：链接和图像默认是可拖动的。
提示：draggable 属性常用在拖放操作中。请在我们的拖放教程中学习更多内容。
HTML 4.01 与 HTML5 之间的差异
draggable 属性是 HTML5 中的新属性。
语法
<element draggable="true|false|auto">
属性值
| 值 | 描述 |
| true | 规定元素的可拖动的。 |
| false | 规定元素不可拖动。 |
| auto | 使用浏览器的默认行为。 |
实例：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>HTML5-draggable(拖放)</title>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
* 虽然已经设定了img元素可被拖动，但是浏览器默认地，无法将数据/元素放置到其他元素中。
* 如果有需要设置某些元素可接受被拖动元素，则要阻止它的默认行为，
* 这要通过设置该接收元素的ondragover 事件，调用event.preventDefault() 方法
*/
function allowDrop(ev) {
ev.preventDefault(); //阻止默认行为
//ev.target.id
//此处ev.target是接收元素，通过事件被绑定在哪个元素即可区分
}
/*
* 当该img元素被拖动时，会触发一个ondragstart 事件，该事件调用了一个方法drag(event)。
*/
function drag(ev) {
//ev.dataTransfer.setData() 方法设置被拖数据的数据类型（Text）和值（被拖元素id），
//该方法将被拖动元素的id存储到事件的dataTransfer对象内，ev.dataTransfer.getData()可将该元素取出。
//此处ev.target是被拖动元素
ev.dataTransfer.setData("Text", ev.target.id);
}
/*
* 当被拖元素移动到接收元素，
* 松开鼠标时（即被拖元素放置在接收元素内时）会出发ondrop事件
*/
function drop(ev) {
ev.preventDefault(); //阻止默认行为
var data = ev.dataTransfer.getData("Text"); //将被拖动元素id取出
ev.target.appendChild(document.getElementById(data)); //将被拖动元素添加到接收元素尾部
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--为了使元素可拖动，把 draggable 属性设置为 true-->
<img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Atas ialah kandungan terperinci html5规定元素是否可拖动的属性draggable. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
