HTML5の実戦とネイティブドラッグの解析（ドラッグ可能な4つの属性とその他のメンバー）

Dragable 属性

以前、HTML5 のネイティブ ドラッグ アンド ドロップに関する関連知識をいくつか紹介しました。今日は、HTML5 のドラッグ アンド ドロップに関するその他の小さな機能を紹介します。早速、一緒に見ていきましょう。

デフォルトでは、リンク、テキスト、画像をドラッグでき、コードを書かなくてもドラッグできます。他の要素タグをドラッグ可能にしたい場合、それができるのは HTML5 だけです。 HTML5 では、すべての HTML 要素にドラッグ可能属性を指定し、要素をドラッグできるかどうかを示します。 link タグと image タグでは、dragable 属性が自動的に true に設定され、その他の要素の Dragonable 属性のデフォルト値は false です。

ドラッグ可能な属性をサポートするブラウザは、Firefox 4 以降、Chrome、IE 10 以降、Safari 5 以降です。 Opera 11.5 以前のバージョンは、HTML5 のドラッグ アンド ドロップ機能をサポートしていません。さらに、Firefox がドラッグ可能なプロパティをサポートできるようにするには、ondragstart イベント ハンドラーを追加し、一部の情報を dataTransfer オブジェクトに保存する必要があります。 IE 9 以前では、mousedown イベント ハンドラーを介して dragDrop() メソッドを呼び出すと、任意の要素がドラッグ可能になりました。 Safari 4 以前のバージョンでは、対応する要素 -khtml-user-drag の CSS スタイルを追加で設定する必要があります。 要素をドラッグすることができます。

HTML5 他のメンバーのドラッグ アンド ドロップ

dataTransfer オブジェクトのいくつかのプロパティは以前に紹介されましたが、それらは包括的なものではありません。以下のメソッドとプロパティの一部は、見落とされている可能性があります。

addElement(element): ドラッグ操作用の要素を追加します。この要素の追加はデータにのみ影響し (つまり、ドラッグ ソースとして機能し、コールバックに応答するオブジェクトを追加します)、ドラッグ操作中のページ要素の外観には影響しません。このブログの執筆時点では、このメソッドを実装しているのは Firefox 3.5 以降のみです。

clearData(format): 特定の形式で保存されたデータをクリアします。このメソッドを実装するブラウザには、Firefox 3.5 以降、Safari 4 以降、IE、Safari 4 以降などがあります。

setDragImge(element, x, y): ドラッグ時にカーソル下に表示する画像を指定します。このメソッドは、表示される HTML 要素と、画像内のカーソルの x 座標と y 座標という 3 つのパラメーターを受け取ります。このうち、HTML 要素は画像またはその他の要素にすることができます。画像の場合はその画像が表示され、別の要素の場合はレンダリングされた要素が表示されます。サポートされているブラウザは、Safari 4 以降、Chrome および Firefox 3.5 以降です。

タイプ：現在保存されているデータタイプ。これは、「テキスト」などの文字列の形式でデータ型を格納する配列のようなコレクションです。サポートされているブラウザは、Chrome、Firefox 3.5 以降、および IE 10 以降です。

理論的な知識を理解した後、理解を深めていくために小さな例を挙げてみましょう。

ドラッグ可能な属性とその他のメンバーの小さな例

HTML コード

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="false">c</li>
</ul>
<a href="http://www.baidu.com/">d</a>
<p id="p1"></p>

CSSコード

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}

JavaScriptコード

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的
//拖动不带链接的li，会起作用但不跳转链接
//拖动带连接的a，会起作用也跳转

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var aA = document.getElementsByTagName('a');
	var op = document.getElementById('p1');
	
	for(var i=0;i<aLi.length;i++){
	
		aLi[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串
			
			ev.dataTransfer.effectAllowed = &#39;all&#39;;
			
			ev.dataTransfer.setDragImage(this,0,0);
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
	}
	for(var i=0;i<aA.length;i++){
	
		aA[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串
			
			ev.dataTransfer.effectAllowed = &#39;link&#39;;
			
		
		};
		
		aA[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
	}
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = &#39;green&#39;;
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = &#39;red&#39;;
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		ev.dataTransfer.dropEffect = &#39;link&#39;;  //真对外部文件
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		this.style.background = &#39;red&#39;;	
	
		alert( ev.dataTransfer.getData(&#39;a&#39;) );
		alert( ev.dataTransfer.types );
	
	};
	
};

デスクトップをページにドラッグする小さな例

HTML コード

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的

window.onload = function(){

	var op = document.getElementById('p1');
	
	
	
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = 'green';
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = 'red';
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		ev.dataTransfer.dropEffect = 'link';  //真对外部文件
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		ev.preventDefault();  //阻止默认行为
	
		this.style.background = 'red';	
		
		var oFR = new FileReader();
	
		var list = ev.dataTransfer.files;  //当前拖拽的那个文件(返回的一个文件列表)
		
		//alert(list.length);
		
		//type : 文件类型
		
		//alert(list[0].type);
		
		
		oFR.onload = function(){ //读取完成，触发事件
			
			alert(this.result);  // 读取到的信息
			
		};
		
		oFR.readAsDataURL(list[0]);
	
	};
	
};

S コード

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}

JavaScriptコード

<p id="p1">梦龙小站</p>

ゴミ箱削除の小さな例

HTMLコード

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="true">c</li>
</ul>
<p id="p1">垃圾箱</p>

CSSコード

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px; color:white;}

JavaScriptコード

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var op = document.getElementById('p1');
	var iNow = 0;
	
	var targetLi = null;
	
	for(var i=0;i<aLi.length;i++){
	
		aLi[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;text&#39;,this.innerHTML);  //存储一个键值对 : value值必须是字符串
			
			targetLi = this;
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
	}
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = &#39;green&#39;;
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = &#39;red&#39;;
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		this.style.background = &#39;red&#39;;	
	
		var oText = ev.dataTransfer.getData(&#39;text&#39;);
	
		if(targetLi){
			targetLi.parentNode.removeChild(targetLi);
			this.innerHTML = &#39;删除的是:&#39;+oText;
		}
	
	};
	
};

HTML5ここでは、ネイティブ ドラッグ (4 つのドラッグ可能な属性とその他のメンバー) の実戦と分析を紹介します。関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。