溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“HTML5新增屬性之拖拽屬性的示例”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“HTML5新增屬性之拖拽屬性的示例”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。
1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 3、平臺無關(guān)性：超級文本標(biāo)記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
HTML5新增的許多屬性：
o 文件類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。
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 全域?qū)傩裕篿d, tabindex, repeat。
o 新的全域?qū)傩裕篶ontenteditable,contextmenu, draggable, dropzone, hidden, spellcheck。
o 移除元素：acronym, applet,basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike,tt。
下面我們就可是介紹HTML5新增屬性中的拖拽屬性吧。
DataTransfer對象：拖拽對象用來傳遞的媒介，一般為Event.dataTransfer
Draggable屬性: 顧名思義，被拖拽的元素需要設(shè)置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 事件: 當(dāng)拖拽元素開始被拖拽的時候觸發(fā)的事件，此事件作用在被拖拽元素上
ondragenter事件：當(dāng)拖拽元素進(jìn)入目標(biāo)元素時候觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondragover事件：當(dāng)拖拽元素穿過目標(biāo)元素時候觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondrop事件：當(dāng)拖拽元素在目標(biāo)元素上同時放開鼠標(biāo)時觸發(fā)的時候，此事件作用在目標(biāo)元素上
ondragend事件：當(dāng)拖拽完成時觸發(fā)的事件，此事件作用在被拖拽元素上
Event.preventDefault() 方法：阻止默認(rèn)事件方法等的執(zhí)行。在ondrop中一定要執(zhí)行preventDefault，否則ondrop事件不會被觸發(fā)。另外，如果是從其他應(yīng)用軟件或者文件中拖東西進(jìn)來，尤其是圖片的時候，默認(rèn)的動作是顯示這個圖片或者是相關(guān)信息，并不是真的執(zhí)行drop。此時需要用document的ondragover事件替代
Event.effectAllowed 屬性：拖拽效果，取值有：
None，copy，copyLink，copyMove，link，linkMove，move，all，uninitialized(default)
值 | 含義 |
None | 該項目不允許被drop |
copy | 源項目的復(fù)制項可能會出現(xiàn)在新的位置 |
copyLink | 允許copy或者link操作 |
copyMove | 允許copy或者move操作 |
link | 可以在新的地方建立與源的鏈接 |
linkMove | 允許link或者move操作 |
move | 一個項目可能被移動到新的位置 |
All | 允許所有操作 |
事件觸發(fā)順序
ondragstart->ondragenter->ondragover->ondrop->ondragend
box從右邊拖到container中后，box在右邊消失，container中添加了被拖拽的box。
右邊的box是可排序的。
代碼
<body> <p class="container"> container </p> <p class="boxList"> <p class="box" draggable="true">box-1</p> <p class="box" draggable="true">box-2</p> <p class="box" draggable="true">box-3</p> <p class="box" draggable="true">box-4</p> <p class="box" draggable="true">box-5</p> <p class="box" draggable="true">box-6</p> <p class="box" draggable="true">box-7</p> </p> <p class="alert"/> </body>
<script>
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;i<listLength;i++){
boxes[i].ondragstart = function (ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setDragImage(ev.target, 0, 0);
ev.dataTransfer.setData("Text",i+1);
// dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值
// 數(shù)據(jù)類型是text，值是可拖動元素的innerHTML
targetDropEle = ev.target;
showAlter("ondragstart")
}
boxes[i].ondragend = function(ev) {
/*拖拽結(jié)束*/
ev.dataTransfer.clearData("Text");
targetDropEle = null;
showAlter("ondragend");
return false
};
boxes[i].ondragover = function () {
/*拖拽元素進(jìn)入目標(biāo)元素上移動*/
showAlter("ondragover");
event.preventDefault();
// 默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式;
}
boxes[i].ondragenter = function (ev) {
showAlter("ondragenter");
/*拖拽元素進(jìn)入目標(biāo)元素*/
}
boxes[i].ondrop = function (ev) {
/*拖拽元素進(jìn)入目標(biāo)元素頭上，同時鼠標(biāo)松開的時候*/
if(targetDropEle){
ev.preventDefault();
// 調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
showAlter("ondrop");
ev.target.parentNode.insertBefore(targetDropEle,ev.target);
}
}
}
container.ondragover = function () {
/*拖拽元素進(jìn)入目標(biāo)元素上移動*/
showAlter("ondragover");
event.preventDefault();
// 默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式;
}
container.ondragenter = function (ev) {
showAlter("ondragenter");
/*拖拽元素進(jìn)入目標(biāo)元素*/
ev.target.style.opacity=0.5
}
container.ondrop = function (ev) {
/*拖拽元素進(jìn)入目標(biāo)元素頭上，同時鼠標(biāo)松開的時候*/
if(targetDropEle){
ev.preventDefault();
// 調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
showAlter("ondrop");
// let number=ev.dataTransfer.getData("Text");
// if(number%2==0){
// return false;
// }
targetDropEle.parentNode.removeChild(targetDropEle);
container.appendChild(targetDropEle);
ev.target.style.opacity=1;
}
}
})();
function showAlter(content) {
setTimeout(function () {
document.getElementsByClassName('alert')[0].style.display="none"
},1000)
document.getElementsByClassName('alert')[0].innerHTML=content;
document.getElementsByClassName('alert')[0].style.display="block"
console.log(content);
}
</script>還看到了一些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的規(guī)范-->
<!--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>
<!--下載動態(tài)生成的文件，通bob創(chuàng)建二進(jìn)制文件，然后用這個屬性下載到本地-->
<!--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"
// <!--下載動態(tài)生成的文件，通bob創(chuàng)建二進(jìn)制文件，然后用這個屬性下載到本地-->
var blob = new Blob(["hello world I am content "]);//文本內(nèi)容
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新增屬性之拖拽屬性的示例”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼