집 > 기사 > 웹 프론트엔드 > HTML5에서 드래그 앤 드롭 기능을 구현하는 단계에 대한 자세한 설명

HTML5에서 드래그 앤 드롭 기능을 구현하는 단계에 대한 자세한 설명

零到壹度원래의: 2018-04-03 17:45:382827검색

이 글은 HTML5에서 드래그 앤 드롭 기능을 구현하기 위한 세부 단계를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 함께 살펴볼까요

질문: 갑자기 변덕스러워서 영화 웹사이트에 컬렉션(장바구니와 유사한 것)을 추가하고 싶었습니다. 이미지를 드래그하여 추가할 수 있습니다

전제 조건: HTML5 China Loacl Strorage를 이해해야 합니다. (물론 다른 웹 저장소도 작동합니다. 저는 Local Stroage를 사용합니다.)

해결책: 여기에서 주요 강조점은 드래그 앤 드롭 기능의 세부 사항에 있습니다. 그리고 CSS를 혼자서 천천히

여기서 컬렉션 버튼을 클릭하여 새 P 박스를 표시하고(좋아하는 영화를 저장하기 위해), P 박스를 숨기려면 두 번 클릭하세요. 여기에 너무 많은 세부사항이 있습니다
드래그 가능한 그림에 대한 속성 설정: 드래그 가능한 속성 및 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);	//标准写法
}

"복사"는 문자 그대로 데이터의 복사본을 복사하고 다른 속성 값도 복사한다는 의미이므로 더 이상의 설명은 생략하겠습니다. 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. 위 코드에는 키 값 Value에 대한 localstrorage 읽기에 대한 정보가 포함되어 있습니다. 나중에 데이터가 증가할 수 있기 때문에 이를 json 객체로 캡슐화했습니다. 예를 들어 사진의 src가 추가될 뿐만 아니라 사진 소개(예: 감독, 배우, 소개 및 기타 정보)는 json 개체를 사용할 때 json 개체를 사용하는 것이 좋습니다

읽은 모든 localstroage 값을 json 개체로 캡슐화해야 합니다

rreee

5. 사실 여기서 이 드래그 앤 드롭 기능은

HTML5에서 드래그 앤 드롭 기능을 구현하는 단계에 대한 자세한 설명

관련 기사