DataTransferオブジェクトのいくつかのまとめ

すべての要素はターゲットイベントの防止をサポートしていますが、これらの要素はデフォルトではリリースが許可されていません.ドラッグした場合、ユーザーがどのように操作しても、DRopイベントをトリガしません.ただし、任意の要素を有効な配置先に変更することができます.方法は、dropenterとdroppoverのデフォルトの行為を書き換えることです.

Hello 

首先我们需要把元素droptarget设置为可以放置的元素，也就是默认重写他的dragenter/dragover

//      dragover/dragenter               
 target.οndragοver=function(event)
{
  event.preventDefault();
};
target.οndragenter=function(event)
{
  event.preventDefault();
};

は次に、要素が置かれているときにトリガされるイベントを示すdropイベントを設定する必要がある.

//  ondrop  ，            !
target.οndrοp=function(event)
{
  // FF3.5+ ，                   URL，     
  //  URL，            URL，     FF      ，      !
  event.preventDefault();
  //event.target        
  event.target.innerHTML=event.dataTransfer.getData('Text');
};

は、移動が必要なデータを格納するために、DRAGstartイベントを移動要素に設定する.

//          dragstart！
 document.getElementById("srcE").οndragstart=function(event)
{
 event.dataTransfer.setData("Text","           ！");
};

この時にsrceを移動すると、droptargetから解放され、内部テキストが「私は私のデータを転送します」になっていることが分かります.
テキストボックスの内容を最初のdivに移動するようにします.
第一歩:まず最初のdivを配置できる要素に変えます.つまり、dragenter/dragoverを書き直します.

//  moveTarget dragenter dragover    div    
document.getElementById("moveTarget").οndragenter=function(e)
{
 e.dataTransfer.dropEffect="move";// dragenter          !
  e.preventDefault();
};
document.getElementById("moveTarget").οndragοver=function(e)
{
   e.preventDefault();
};

第二ステップ:移動が必要な要素のためにdragstartイベントを設定する.

document.getElementById("moveSrc").οndragstart=function(e)
{
  e.dataTransfer.effectAllowed="move";//   dragstart   effectStart
};

第3ステップ:divのdropイベントを書き換えます.

//   div drop  ，             
 document.getElementById("moveTarget").οndrοp=function(event)
{
 
   this.innerHTML=document.getElementById("moveSrc").value;
//     drop    ，    URL
 event.preventDefault();
};

この時もテキストボックスの要素内容の移動が可能です.
注意:
(1)dropEffect属性を使用するには、dragenterイベントハンドラにおいて、配置先を設定する必要があります.(2)dropEffectはeffect Allowed属性を組み合わせるだけで使えます.effect Allowedはドラッグが可能な要素を表します.そのようなdropEffect、そしてeffect Allowedはモバイル要素のdragstartに設定されています.(3)dropEffectはカーソルが異なる記号として表示されるだけですが、カーソルが示す動作をどのように実現するかはコードの作成者によって異なります.つまり、あなたが介入しない限り、自動的に移動したり、コピーしたり、リンクを開けたりしません.つまり、ビューアはカーソルのスタイルを変えるしかありません.
(4)テキストボックスをドラッグすると、ブラウザがsetDataを呼び出してテキストをtext形式でdata Transferに保存し、リンクや画像をドラッグするとURLを保存し、dropイベントで読み込むことができます.

//  ：        setData         dataTransfer !
document.getElementById("moveSrc").οndragstart=function(e)
{
  e.dataTransfer.effectAllowed="copy";
};
//  moveTarget dragenter dragover    div    
document.getElementById("moveTarget").οndragenter=function(e)
{
 e.dataTransfer.dropEffect="copy";
  e.preventDefault();
};
document.getElementById("moveTarget").οndragοver=function(e)
{
   e.preventDefault();
};
//   div drop  ，             
 document.getElementById("moveTarget").οndrοp=function(event)
{
 event.target.innerHTML=event.dataTransfer.getData('text');
 event.preventDefault();
};

この例では、ドラフトではデータを手動で保存していませんが、オンドラッブではevent.data Transfer.get Data('text')でデータを取得しました.ちょっと注意してください.get Dataを呼び出した時に入ってきたのは「text」です.
でも、私達はやはり手動でsetDataを呼び出して、同じ操作を完成することを提案します.
(5)dataTransferオブジェクトは、各MIMEタイプに一つの値を保存することができますが、data Transferオブジェクトに保存されているデータはdropイベントプログラムでしか読み取れません.読み込まれていない場合は、data Transferオブジェクトは破棄され、データも失われます.

document.getElementById("moveSrc").οndragstart=function(event)
{
//     URL text  
  event.dataTransfer.effectAllowed="copy";
  event.dataTransfer.setData('text','liangklfang');
  event.dataTransfer.setData('url','www.baidu.com');
};
//  moveTarget dragenter dragover    div    
document.getElementById("moveTarget").οndragenter=function(e)
{
 e.dataTransfer.dropEffect="copy";
  e.preventDefault();
};
document.getElementById("moveTarget").οndragοver=function(e)
{
   e.preventDefault();
};
//FF  5           url text   text/uri-list text/plain
//     Text   text/plain,       URL       !
//       Text!
 document.getElementById("moveTarget").οndrοp=function(event)
{
var url=event.dataTransfer.getData('url')||event.dataTransfer.getData('text/uri-list');
var text= event.dataTransfer.getData('Text');//        URL，   FF    drop                 
 this.innerHTML=url+text;
 event.preventDefault();
};

総括:data Transfer対象は、私がフォックスブラウザの低バージョンにYSLOWをインストールした時に見ました.いい技術です.