HTML5實(shí)現(xiàn)拖拽功能的方式
這篇文章給大家分享的是有關(guān)HTML5實(shí)現(xiàn)拖拽功能的方式的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出羅源免費(fèi)做網(wǎng)站回饋大家。
問題：突然奇想，想在電影網(wǎng)上加一個(gè)收藏（類似于購物車的東西），可以通過拖拽圖片進(jìn)行添加
前提：需要了解HTML5中國Loacl Strorage（當(dāng)然，其他的web存儲(chǔ)也行，我用的是Local Stroage）
解決：這里主要重點(diǎn)強(qiáng)調(diào)關(guān)于進(jìn)行拖拽功能的細(xì)節(jié)，具體html和css就自己慢慢弄吧
首先這里先是對(duì)收藏按鈕進(jìn)行點(diǎn)擊顯示新的p框（存放收藏的電影），二次點(diǎn)擊隱藏p框，這里不做過多介紹
為可以進(jìn)行拖拽的圖片進(jìn)行設(shè)置屬性：draggable屬性和ondragstart事件
var pic_list=document.getElementsByClassName("middle_content")[0];
var pic_list_li=pic_list.getElementsByTagName("li");
for(var i=0;i我這里的代碼就是獲取所選要拖拽圖片的父元素，然后進(jìn)行遍歷，將每一個(gè)img都設(shè)置屬性和事件
3.分別編寫進(jìn)行拖拽時(shí)的函數(shù)和拖拽完成的函數(shù)
//設(shè)置拖拽效果
function drag(e){
e=e||event;
e.dataTransfer.effectAllowed = "copy";
//IE需通過服務(wù)器訪問方式，F(xiàn)F、chrome支持本地方式進(jìn)行訪問
e.dataTransfer.setData("text", e.target.src); //IE兼容寫法
//e.dataTransfer.setData("text/plain", e.target.src); //標(biāo)準(zhǔn)寫法
}“copy”那就是字面意思，復(fù)制一份當(dāng)然的data，當(dāng)然還有其他的屬性值，這里就不做進(jìn)一步解釋
//拖拽釋放效果
function drop(e){
//方式拖拽事件傳播
allowDrop(e);
//從拖拽事件中獲取數(shù)據(jù)
var data=e.dataTransfer.getData("text");
//e.target.id=="dropdown"，表示目標(biāo)對(duì)象是p（dropdown）
//e.target.parentNode.id=="dropdown"表示目標(biāo)對(duì)象是dropdown的直接子元素UL
//e.target.parentNode.parentNode.id=="dropdown" 表示目標(biāo)對(duì)象是UL中的LI
//e.target.parentNode.parentNode.parentNode.id=="dropdown"表示目標(biāo)對(duì)是元素
//e.target.parentNode.parentNode.parentNode.parentNode.id=="dropdown"表示目標(biāo)對(duì)象是![]()
元素
if(e.target.id=="dropdown" || e.target.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.parentNode
.parentNode.id=="dropdown"){
//從localStorage中嘗試根據(jù)Src讀取數(shù)據(jù)
var newFilms=readFromStorage(data);
if (newFilms==null){
films.filmsSrc=data;
}
//把處理后的商品信息存儲(chǔ)到localStorage
localStorage.setItem(data, JSON.stringify(films));
//重新加載并刷新頁面中的collect
document.getElementsByClassName("dropdown")[0].innerHTML=loadCollect();
}
}4.上述代碼中有關(guān)于key值讀取localstrorage的值，我將其封裝成了json對(duì)象，因?yàn)楹笃诳赡軘?shù)據(jù)會(huì)增多，比如，不僅僅是加入圖片的src，還有可能是有關(guān)圖片的介紹，例如，導(dǎo)演，演員，簡介之類的信息，這時(shí)，用json對(duì)象會(huì)相對(duì)于更好一些
所有需要將讀取的localstroage值封裝成json對(duì)象
//根據(jù)key讀取localStorage的值并封裝成JSON
function readFromStorage(key){
var jsonStr=localStorage.getItem(key);
var newFilms=JSON.parse(jsonStr);
return newFilms;
}5。其實(shí)在這里，這個(gè)拖拽的功能就相當(dāng)于是實(shí)現(xiàn)了
感謝各位的閱讀！關(guān)于HTML5實(shí)現(xiàn)拖拽功能的方式就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
新聞名稱：HTML5實(shí)現(xiàn)拖拽功能的方式
文章位置：http://m.jiaotiyi.com/article/gjgghj.html