Detaillierte Erläuterung der Schritte zur Implementierung der Drag-and-Drop-Funktion in HTML5

In diesem Artikel werden hauptsächlich die detaillierten Schritte zur Implementierung der Drag-and-Drop-Funktion in HTML5 vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Frage: Plötzlich möchte ich eine Sammlung auf der Film-Website hinzufügen (ähnlich einem Warenkorb). Sie können sie durch Ziehen des Bildes hinzufügen

Voraussetzung: Sie müssen HTML5 China Loacl Storage verstehen (natürlich funktionieren auch andere Webspeicher, ich verwende Local Storage)

Lösung: Der Schwerpunkt liegt hier auf den Details des Drag-and-Drop-Funktion, insbesondere HTML und CSS. Machen Sie es einfach langsam selbst

1. Klicken Sie zunächst auf die Sammlungsschaltfläche, um das neue P-Feld anzuzeigen (zum Speichern der Lieblingsfilme), und klicken Sie auf Das zweite Mal, um das p-Feld auszublenden. Einleitung

2. Attribute für Bilder festlegen, die gezogen werden können: ziehbare Attribute und Ondragstart-Ereignisse

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;

Mein Code hier besteht darin, das übergeordnete Element des zu ziehenden Bilds auszuwählen, es dann zu durchlaufen und Attribute und Ereignisse für jedes Bild festzulegen

3. Schreiben Sie die Funktion wann Das Ziehen und die Funktion nach dem Ziehen sind abgeschlossen

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

„Kopieren“ bedeutet wörtlich das Kopieren einer Kopie der Daten und anderer Attributwerte. Ich werde es hier nicht weiter erklären

//拖拽释放效果
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. Im obigen Code In Bezug auf den Schlüsselwert, der den Wert von localstrorage liest, habe ich ihn in ein JSON-Objekt gekapselt, da die Daten später zunehmen können, beispielsweise wird nicht nur der src des Bildes hinzugefügt, sondern auch der B. Regisseur, Schauspieler, Einleitung und andere Informationen. Zu diesem Zeitpunkt ist es besser, JSON-Objekte zu verwenden

Alle lokalen Speicherwerte müssen gelesen werden in JSON-Objekte einzukapseln

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

5. Tatsächlich entspricht diese Drag-and-Drop-Funktion hier der Umsetzung von

Verwandte Empfehlungen:

Grundlegende Ideen für die Implementierung der Drag-and-Drop-Funktion in native js

So implementieren Sie die Drag-and-Drop-Funktion in Vue

WPF implementiert Drag und Drop-Funktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung der Drag-and-Drop-Funktion in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!