欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5中實(shí)現(xiàn)圖片拖放的方法-創(chuàng)新互聯(lián)

這篇文章主要介紹HTML5中實(shí)現(xiàn)圖片拖放的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司憑借專(zhuān)業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢(shì)，提供專(zhuān)業(yè)的網(wǎng)站策劃、成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站優(yōu)化、軟件開(kāi)發(fā)、網(wǎng)站改版等服務(wù)，在成都十余年的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都超過(guò)千家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

拖(drag)放(drop)在頁(yè)面中是一種常見(jiàn)的HTML5特效，它所表示的就是抓取對(duì)象以后再拖放到另一個(gè)位置。在 HTML5 中，任何元素都能可以進(jìn)行拖放，所以接下來(lái)在文章中將通過(guò)實(shí)例詳細(xì)告訴大家如何實(shí)現(xiàn)拖動(dòng)效果。

拖放效果所需的知識(shí)點(diǎn)

draggable

規(guī)定元素是否可拖動(dòng)，一般情況下鏈接和圖片默認(rèn)是可拖動(dòng)的。

true：規(guī)定元素是可拖動(dòng)的。

false： 規(guī)定元素是不可拖動(dòng)的。

auto：使用瀏覽器的默認(rèn)特性。

拖放元素時(shí)觸發(fā)的事件

ondragstart ：拖動(dòng)元素開(kāi)始時(shí)所觸發(fā)的事件

ondrag：元素正在拖動(dòng)時(shí)觸發(fā)的事件

ondragend：用戶完成元素拖動(dòng)后觸發(fā)的事件

釋放目標(biāo)時(shí)觸發(fā)的事件

ondragenter：被拖動(dòng)元素進(jìn)入拖動(dòng)范圍時(shí)觸發(fā)事件

ondragover ：表示在什么放置被拖動(dòng)的數(shù)據(jù)所觸發(fā)的事件。

ondragleave：被拖動(dòng)元素離開(kāi)拖動(dòng)范圍時(shí)觸發(fā)的事件

ondrop： 鼠標(biāo)離開(kāi)拖放元素時(shí)

案例分享：將圖片放置到box盒子中

（1）設(shè)置元素為可拖放的

<img id="drag1" src=images/1.jpg" draggable="true">

（2）元素拖動(dòng)時(shí)發(fā)生的情況（拖）

dataTransfer：保存拖動(dòng)的數(shù)據(jù)

text為數(shù)據(jù)類(lèi)型，event.target.id為數(shù)據(jù)，將數(shù)據(jù)賦值給dataTransfer保存。

function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}

（3）  將元素拖動(dòng)到指定位置（放）

默認(rèn)情況下無(wú)法將元素拖動(dòng)放到另一個(gè)位置，因此需要取消默認(rèn)事件，需要用到preventDefault()方法

其中 setData()方法指被拖數(shù)據(jù)的數(shù)據(jù)類(lèi)型和值

appendChild() 方法從一個(gè)元素向另一個(gè)元素中移動(dòng)元素。

function drop(event)
{
event.preventDefault();//取消瀏覽器的默認(rèn)行為
var data=event.dataTransfer.getData("Text");//獲取指定格式的數(shù)據(jù)
event.target.appendChild(document.getElementById(data));
}

完整代碼

<body>
	<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<img src="images/1.jpg" id="drag1" draggable="true" ondragstart="drag(event)">
<script>
	function allowDrop(event)
        {
          event.preventDefault();//取消事件默認(rèn)行為
            }
		//拖
		function drag(event){
		 event.dataTransfer.setData("Text",event.target.id)
		}
		//放
          function drop(event){
	event.preventDefault();
	var data=event.dataTransfer.getData("text");
	event.target.appendChild(document.getElementById(data))
}
</script>
</body>

效果圖

HTML5中實(shí)現(xiàn)圖片拖放的方法

以上是HTML5中實(shí)現(xiàn)圖片拖放的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：HTML5中實(shí)現(xiàn)圖片拖放的方法-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://chinadenli.net/article38/gcgpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、做網(wǎng)站、面包屑導(dǎo)航、虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化