Detailed explanation of the steps to implement drag and drop function in HTML5

This article mainly introduces the detailed steps to implement the drag and drop function in HTML5. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

Question: I suddenly had a whim and wanted to add a collection (something similar to a shopping cart) on the movie website. You can add it by dragging the picture

Premise: You need to understand HTML5 China Loacl Strorage (of course, other web storage will also work, I use Local Stroage)

Solution: The main emphasis here is on the details of the drag and drop function, specifically html and css Just do it slowly by yourself

1. First of all, click the collection button to display the new p box (to store the collected movies), and click the second time to hide the p box. I won’t do too much here. Introduction

2. Set properties for pictures that can be dragged: draggable properties and ondragstart events

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;

My code here is to get the selected To drag the parent element of the image, then traverse, set attributes and events for each img

3. Write the function when dragging and the function when dragging is completed

//设置拖拽效果
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" means literally, copying a copy of the natural data, and of course other attribute values, there will be no further explanation here

//拖拽释放效果
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. The above code contains information about key value reading For the value of localstrorage, I encapsulated it into a json object because the data may increase later. For example, it is not only the src of the picture, but also the introduction of the picture, such as the director, actor, introduction and other information. , at this time, it is better to use a json object

All the localstroage values ​​that need to be read need to be encapsulated into a json object

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

5. In fact, here, this drag and drop function is equivalent to realizing

Related recommendations:

Basic ideas for implementing drag and drop function in native js

How to implement drag and drop function in vue

WPF implements drag and drop function

The above is the detailed content of Detailed explanation of the steps to implement drag and drop function in HTML5. For more information, please follow other related articles on the PHP Chinese website!