ホームページ > 記事 > ウェブフロントエンド > HTML5の実戦とネイティブドラッグの解析（ドラッグ可能な4つの属性とその他のメンバー）
HTML5の実戦とネイティブドラッグの解析（ドラッグ可能な4つの属性とその他のメンバー）
- 黄舟オリジナル
- 2017-02-11 11:47:361398ブラウズ
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 = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'all';
ev.dataTransfer.setDragImage(this,0,0);
};
aLi[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
for(var i=0;i<aA.length;i++){
aA[i].ondragstart = function(ev){ //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'link';
};
aA[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
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){ //释放鼠标的时候触发
this.style.background = 'red';
alert( ev.dataTransfer.getData('a') );
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;}
//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 = 'yellow';
ev.dataTransfer.setData('text',this.innerHTML); //存储一个键值对 : value值必须是字符串
targetLi = this;
};
aLi[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
op.ondragenter = function(){ //相当于onmouseover
this.style.background = 'green';
};
op.ondragleave = function(){ //相当于onmouseout
this.style.background = 'red';
};
op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
ev.preventDefault(); //阻止默认事件：元素就可以释放了
};
op.ondrop = function(ev){ //释放鼠标的时候触发
this.style.background = 'red';
var oText = ev.dataTransfer.getData('text');
if(targetLi){
targetLi.parentNode.removeChild(targetLi);
this.innerHTML = '删除的是:'+oText;
}
};
}; HTML5ここでは、ネイティブ ドラッグ (4 つのドラッグ可能な属性とその他のメンバー) の実戦と分析を紹介します。関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。