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

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

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

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

まず、ここでコレクションボタンをクリックして新しいPボックスを表示し（お気に入りの動画を保存するため）、2回クリックしてPボックスを非表示にします。ここで詳しく説明します
ドラッグできる画像の属性を設定します: ドラッグ可能な属性と ondragstart イベント

2. 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.実際、ここでは、このドラッグ アンド ドロップ機能が実現されていることに相当します

関連する推奨事項:

ネイティブ JS でドラッグ アンド ドロップ機能を実装するための基本的なアイデア

ドラッグ アンド ドロップ機能を実装する方法vue で

WPF はドラッグアンドドロップ機能を実装します

以上がHTML5にドラッグ＆ドロップ機能を実装する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。