這篇文章主要介紹了HTML5實現拖曳功能步驟詳解,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
問題：突然奇想，想在電影網上加一個收藏（類似購物車的東西），可以透過拖曳圖片來加入
前提：需要了解HTML5中國Loacl Strorage（當然，其他的web存儲也行，我用的是Local Stroage）
解決：這裡主要重點強調關於進行拖曳功能的細節，具體html和css就自己慢慢弄吧
首先這裡先是對收藏按鈕進行點擊顯示新的p框（存放收藏的電影），二次點擊隱藏p框，這裡不做過多介紹
為可以拖曳的圖片設定屬性：draggable屬性與ondragstart事件
var pic_list=document.getElementsByClassName("middle_content")[0];
var pic_list_li=pic_list.getElementsByTagName("li");
for(var i=0;i<pic_list_li.length;i++){
var image=pic_list_li[i].getElementsByTagName("img")[0];
image.setAttribute("draggable",true);
image.ondragstart=drag;我這裡的程式碼就是取得所選要拖曳圖片的父元素，然後進行遍歷，將每一個img都設定屬性和事件
3.分別寫出拖曳時的函數和拖曳完成的函數
//设置拖拽效果
function drag(e){
e=e||event;
e.dataTransfer.effectAllowed = "copy";
//IE需通过服务器访问方式，FF、chrome支持本地方式进行访问
e.dataTransfer.setData("text", e.target.src); //IE兼容写法
//e.dataTransfer.setData("text/plain", e.target.src); //标准写法
}「copy」那就是字面意思，複製一份當然的data，當然還有其他的屬性值，這裡就不做進一步解釋
//拖拽释放效果
function drop(e){
//方式拖拽事件传播
allowDrop(e);
//从拖拽事件中获取数据
var data=e.dataTransfer.getData("text");
//e.target.id=="dropdown"，表示目标对象是p（dropdown）
//e.target.parentNode.id=="dropdown"表示目标对象是dropdown的直接子元素UL
//e.target.parentNode.parentNode.id=="dropdown" 表示目标对象是UL中的LI
//e.target.parentNode.parentNode.parentNode.id=="dropdown"表示目标对是<a>元素
//e.target.parentNode.parentNode.parentNode.parentNode.id=="dropdown"表示目标对象是<img>元素
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中尝试根据Src读取数据
var newFilms=readFromStorage(data);
if (newFilms==null){
films.filmsSrc=data;
}
//把处理后的商品信息存储到localStorage
localStorage.setItem(data, JSON.stringify(films));
//重新加载并刷新页面中的collect
document.getElementsByClassName("dropdown")[0].innerHTML=loadCollect();
}
} 4.上述程式碼中有關於key值讀取localstrorage的值，我將其封裝成了json對象，因為後期可能數據會增多，比如，不僅僅是加入圖片的src，還有可能是有關圖片的介紹，例如，導演，演員，簡介之類的信息，這時，用json物件會相對於更好一些
所有需要將讀取的localstroage值封裝成json物件
//根据key读取localStorage的值并封装成JSON
function readFromStorage(key){
var jsonStr=localStorage.getItem(key);
var newFilms=JSON.parse(jsonStr);
return newFilms;
}# 5。其實在這裡，這個拖曳的功能就相當於實作了
相關推薦：
以上是HTML5實作拖曳功能步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
