資訊專欄INFORMATION COLUMN
摘要：放到何處放到何處事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式。注釋在中不支持拖放。
設(shè)置元素為可拖放
draggable 屬性設(shè)置為 true:
<img draggable="true" />
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值:
function drag(e) {
e.dataTransfer.setData("text/html", value);
}
注："text/html"參數(shù)，我在Mac上用Safari打開，遇到過不能正常解析，解決方法把html和text位置互換一下。ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。
默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式。
event.preventDefault();
調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
通過 dataTransfer.getData("text/html") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
function drop(e) {
e.preventDefault();
}
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注釋：在 Safari 5.1.2 中不支持拖放。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
.drag {
width: 50px;
height: 50px;
background: blue;
display: inline-block;
margin: 10px;
color: white;
font-size: 20px;
text-align: center;
line-height: 50px;
cursor: move;
}
style>
head>
<body>
<div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1div>
<div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2div>
<div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3div>
<script type="text/javascript">
var srcEl = null;
function drag(e, el) {
srcEl = el;
e.dataTransfer.setData("text/html", el.innerHTML);
}
function drop(e, el){
e.preventDefault();
// e.stopPropagation();
if (srcEl != el) {
srcEl.innerHTML = el.innerHTML;
el.innerHTML = e.dataTransfer.getData("text/html");
}
}
function allowDrop(e) {
e.preventDefault();
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
#div1 {
width: 300px;
height: 300px;
border: 1px solid red;
}
#drag1 {
width: 300px;
height: 300px;
}
style>
head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
<img id="drag1" draggable="true" ondragstart="drag(event)"
src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" />
<script type="text/javascript">
function drag(e) {
e.dataTransfer.setData("text/html", e.target.id);
}
function drop(e) {
e.preventDefault();
e.stopPropagation();
var id = e.dataTransfer.getData(text/html);
e.target.appendChild(document.getElementById(id));
}
function allowDrop(e) {
e.preventDefault();
}
script>
body>
html>
W3school原文鏈接：http://www.w3school.com.cn/html5/html_5_draganddrop.asp
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2075.html
摘要：發(fā)展原生拖放的發(fā)展大致可分為三個(gè)階段。在的實(shí)例基礎(chǔ)上，進(jìn)一步制定了拖放的規(guī)范。也根據(jù)規(guī)范實(shí)現(xiàn)了原生拖放功能。被拖動(dòng)的元素在放置目標(biāo)范圍內(nèi)移動(dòng)時(shí)，會(huì)持續(xù)觸發(fā)該事件。參考資料拖放操作拖拽操作拖拽類型列表高級程序設(shè)計(jì)第版第章腳本編程原生拖放 發(fā)展 原生拖放的發(fā)展大致可分為三個(gè)階段：IE4、IE5+、HTML5。 IE4 是最早在網(wǎng)頁中引入 JavaScript 拖放功能的，當(dāng)時(shí)只有圖像和選中...
摘要：在中，唯一有效的放置目標(biāo)是文本框。以的實(shí)例為基礎(chǔ)指定了拖放規(guī)范。觸發(fā)事件后，隨即會(huì)觸發(fā)事件，而且在元素被拖動(dòng)期間會(huì)持續(xù)發(fā)送該事件。指定一副圖像，當(dāng)拖動(dòng)發(fā)生時(shí)，顯示在光標(biāo)下方。 最早在網(wǎng)頁中引入JavaScript拖放功能是IE4。當(dāng)時(shí)，網(wǎng)頁中只有兩種對象可以拖放：圖像和某些文本。在IE4中，唯一有效的放置目標(biāo)是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且?guī)缀蹙W(wǎng)頁中的任何元...
摘要：年月日，萬維網(wǎng)聯(lián)盟宣布，標(biāo)準(zhǔn)規(guī)范制定完成。作為一種超文本標(biāo)記語言，已經(jīng)成為了上使用的通用標(biāo)記語言，而在這次的規(guī)范中，為開發(fā)者帶來了一些令人興奮的新特性。 2014年10月29日，W3C(萬維網(wǎng)聯(lián)盟)宣布，HTML5標(biāo)準(zhǔn)規(guī)范制定完成。作為一種超文本標(biāo)記語言，HTML已經(jīng)成為了Web上使用的通用標(biāo)記語言，而在這次HTML5的規(guī)范中，為開發(fā)者帶來了一些令人興奮的新特性。 下面簡單地介紹下這些...
閱讀 735·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6182·2021-11-29 11:00
