ホームページ > 記事 > ウェブフロントエンド > HTML5にドラッグ＆ドロップ機能を実装する手順を詳しく解説

HTML5にドラッグ＆ドロップ機能を実装する手順を詳しく解説

零到壹度オリジナル: 2018-04-03 17:45:382818ブラウズ

この記事では、HTML5 でドラッグアンドドロップ機能を実装するための詳細な手順を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして一緒に見てみましょう

質問: 突然思い立って、映画 Web サイトにコレクション (ショッピングカートのようなもの) を追加したいと思いました。画像をドラッグすることで追加できます

前提条件: HTML5 China Loacl Strorage を理解する必要があります (もちろん、他の Web ストレージも機能します。私は Local Stroage を使用します)。解決策: ここで重点を置くのは、ドラッグアンドドロップ機能の詳細です。特定の HTML とcssは自分でゆっくり

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;

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);	//标准写法
}

「コピー」は、文字通りデータとその他の属性値のコピーを意味します。ここではこれ以上の説明はありません

。

//拖拽释放效果
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. 上記のコードには、キー値のローカルストレージの読み取りに関する情報が含まれています。後でデータが増加する可能性があるため、画像の src だけでなく、画像の紹介、たとえば監督、俳優、紹介、その他の情報、これは json オブジェクトを使用する場合、json オブジェクトを使用することをお勧めします

読み取られたすべての localstroage 値は json オブジェクトにカプセル化する必要があります

れーれー
5.実際、ここでは、このドラッグアンドドロップ機能が実現されていることに相当します

HTML5にドラッグ＆ドロップ機能を実装する手順を詳しく解説

関連記事