HTML 5実戦と剖析の原生ドラッグ(三dataTransferオブジェクト)

HTML 5ドラッグデータ転送
dragstart,drag,dragendイベントにより原生ドラッグが実現されたが.しかし、これはドラッグだけであり、IE 6とIE 7ではドラッグの問題があり、データの交換も実現されていない.データの交換を実現するために、IE 5はdataTransferオブジェクトを導入した.DataTransferオブジェクトは、ドラッグされた要素からターゲットに配置された文字列フォーマットのデータを渡すイベントオブジェクトのプロパティです.イベントオブジェクトのプロパティであるため、ドラッグ＆ドロップイベントのイベントハンドラでのみdataTransferオブジェクトにアクセスできます.イベントハンドラでは、このオブジェクトのプロパティとメソッドを使用してドラッグ&ドロップ機能を改善できます.
DataTransferオブジェクトには、getData()メソッドとsetData()メソッドの2つの主要なメソッドがあります.この2つの方法の英語の字面の意味からその用途を大まかに推測することができる.getData()メソッドはsetData()メソッドで保存された値を取得できます.setData()メソッドの最初のパラメータであり、getData()メソッドの唯一のパラメータでもあり、データ型を保存するための文字列であり、値は「text」または「URL」である.
IEは「text」または「URL」の2つの有効なデータ型のみを定義し、HTML 5はこれに拡張し、様々なMIMEタイプを指定することができる.後方互換性を考慮すると、HTML 5は「text」または「URL」もサポートしますが、この2つのタイプは「text/plain」または「text/url-list」にマッピングされます.
実際、dataTransferオブジェクトは、MIMEタイプごとに値を保存できます.つまり、同僚がこのオブジェクトにテキストとURLを保存しても他の問題はありません.ただし、dataTransferオブジェクトに保存されているデータはdropイベントハンドラでしか読み込めません.ondropプロセッサでデータが読み込まれていない場合は、dataTransferオブジェクトが破棄され、データが失われます.
テキストボックスのテキストをドラッグすると、ブラウザがsetData()メソッドを呼び出し、ドラッグしたテキストを「text」形式でdataTransferオブジェクトに保存します.同様に、リンクや画像をドラッグ＆ドロップすると、setData()メソッドが呼び出され、URLが保存されます.次に、これらの要素が配置ターゲットにドラッグ&ドロップされると、getData()メソッドでこれらのデータを読み取ることができます.もちろん、開発者としてdragstartイベントハンドラでsetData()を呼び出し、将来使用するために自分が転送するデータを手動で保存することもできます.
データをテキストに保存するのとURLに保存するのとでは違います.データをテキスト形式で保存すると、データは特別な処理を受けません.URL形式で保存すると、ブラウザはWebページのリンクとして使用します.このURLを別のブラウザウィンドウに配置すると、そのURLを開くことができます.
Firefox 5以降のバージョンでは、「url」と「text」を「」と「text/plain」にマッピングできません.しかし、「Text」(T大文字)を「text/plain」にマッピングすることができます.ブラウザ間でよりよくdataTransferオブジェクトからデータを取得するためには、URLデータを取得する際に2つの値を検出し、テキストデータを取得する際に「Text」を使用することが望ましい.
IE 10以降のバージョンでは拡張MIMEタイプ名がサポートされていないため、識別できないデータ型に遭遇した場合にエラーが発生するため、短いデータ型を前にしてください.ただし、「text」または「URL」の値はIEのみが強制的であり、火狐3.6+、Chrome、Operaに他の任意の値を設定した文字列でも正常に実行できる.
dropEffectプロパティとeffectAllowedプロパティ
dataTransferオブジェクトを用いて,データを転送するだけでなく,dataTransferオブジェクトによって,ドラッグされた要素や配置対象となる要素がどのような操作を受信できるかを決定することができる.このような機能を実現するにはdropEffectプロパティとeffectAllowedプロパティが使用されます.
dropEffectプロパティ
ここでdropEffectプロパティでは、ドラッグされた要素がどの動作を実行できるかを知ることができます.この属性の4つの値は次のとおりです.
none:ドラッグした要素をここに置くことはできません.これは、テキストボックス以外のすべての要素のデフォルト値です.
move:ドラッグした要素を配置ターゲットに移動する必要があります.
copy:ドラッグした要素を配置ターゲットにコピーする必要があります.
link:ターゲットを配置するとドラッグした要素が開きます(ただし、ドラッグした要素はリンクでURLアドレスがある必要があります).
エレメントを配置ターゲットにドラッグすると、上記の各値によってカーソルが異なる記号に表示されます.
effectAllowedプロパティ
dropEffect属性だけではあまり役に立たない.effectAllowedプロパティと組み合わせて使用してこそ、機能します.effectAllowedプロパティは、要素をドラッグできる動作(dropEffect)を表します.effectAllowedプロパティにも多くの値があります.値は次のとおりです.
uninitialized:ドラッグされた要素に配置動作を設定していません.
none:ドラッグされた要素は何もできません.
copy:「copy」のdropEffectのみが許可されます.
link:「link」のdropEffectのみが許可されます.
move:「move」のdropEffectのみが許可されます.
copyLink:許容値は「copy」と「link」のdropEffectです.
copyMove:許容値は「copy」と「move」のdropEffectです.
linkMove:許容値は「link」および「move」のdropEffectです.
all:任意のdropEffectを許可します.
effectAllowedプロパティを設定するにはondragstartイベントハンドラで設定する必要があります.小例は以下の通り
HTMLコード

CSSコード

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#div1{ 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 oDiv = document.getElementById('div1');
	
	for(var i=0;i

以上が今日のHTML 5の実戦と剖析の原生ドラッグ(三dataTransferオブジェクト)の内容です.もし皆さんがまだあまり満足していないと感じて、十分に見ていないならば、また左を見て「HTML 5実戦と剖析」をクリックしてください.中にはHTML 5に関する文章がたくさんあります.応援ありがとうございます.