Explication détaillée des étapes pour implémenter la fonction glisser-déposer en HTML5

Cet article présente principalement les étapes détaillées pour implémenter la fonction glisser-déposer en HTML5. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour venir jeter un œil

Question : Du coup, je souhaite ajouter une collection sur le site du film (quelque chose de similaire à un panier. Vous pouvez l'ajouter en faisant glisser l'image).

Prémisse : Vous devez comprendre HTML5 China Loacl Strorage (bien sûr, d'autres stockages Web fonctionneront également, j'utilise Local Stroage)

Solution : L'accent principal ici est mis sur les détails du fonction glisser-déposer, en particulier html et css Faites-le vous-même lentement

1. Tout d'abord, cliquez sur le bouton de collection pour afficher la nouvelle boîte p (pour stocker les films préférés), puis cliquez sur la deuxième fois pour masquer la boîte p. Je ne ferai pas grand-chose ici. Introduction

2. Définir les attributs pour les images qui peuvent être glissées : attributs déplaçables et événements 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;

Mon code ici est d'obtenir Sélectionnez l'élément parent de l'image à faire glisser, puis parcourez et définissez les attributs et les événements pour chaque img

3. Écrivez la fonction lorsque le glisser et la fonction après le glisser sont terminés

//设置拖拽效果
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);	//标准写法
}

"copier" signifie littéralement copier une copie des données, et bien sûr d'autres valeurs d'attribut, il n'y aura donc pas d'explication supplémentaire ici

//拖拽释放效果
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. Dans le code ci-dessus Concernant la valeur clé lisant la valeur de localstrorage, je l'ai encapsulée dans un objet json, car les données peuvent augmenter plus tard, par exemple, non seulement le src de l'image est ajouté, mais aussi l'introduction de l'image, par exemple, le réalisateur, l'acteur, l'introduction et d'autres informations, à ce moment, il vaut mieux utiliser des objets json

Toutes les valeurs localesstroage qui doivent être lu doit être encapsulé dans des objets json

//根据key读取localStorage的值并封装成JSON
function readFromStorage(key){
	var jsonStr=localStorage.getItem(key);
	var newFilms=JSON.parse(jsonStr);
	return newFilms;
}

5. En fait, ici, cette fonction glisser-déposer équivaut à réaliser

Recommandations associées :

Idées de base pour implémenter la fonction glisser-déposer dans js natif

Comment implémenter la fonction glisser-déposer dans vue

WPF implémente le glisser et fonction drop

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!