HTML5_html5 チュートリアルスキルで要素のドラッグを実装する方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5_html5 チュートリアルスキルで要素のドラッグを実装する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:51 PM

html5 要素のドラッグ引っ張る

多くのフロントエンドは、おそらく HTML5 ドラッグアンドドロップの実装方法を理解していません。この記事では、いくつかのアイデアを提供します。後で簡単に参照できるように、ファイルを整理してバックアップします。

最初の例:

index.html

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
<タイトル>ドラッグタイトル>
<スタイル>
.box{
幅: 400px;
高さ: 400px;
float: 左;
}
#box1{
背景: #CCC;
}
#box2{
背景: #FF0;
}
スタイル>
頭>
<ボディ>
<div id="box1" クラス="ボックス">div>
<div id="box2" クラス="ボックス">div>
<img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />

JavaScript コード复制コンテンツ到剪贴板

app1.js
/**
* app1.js
*/
var oBox1,
oBox2、
oImg1;
window.onload = 関数(){
oBox1 = document.getElementById('box1');
oBox2 = document.getElementById('box2');
oImg1 = document.getElementById('img1');
//
oBox1.ondragover = oBox2.ondragover = 関数(e){
e.preventDefault();
};
//
oImg1.ondragstart = 関数(e){
e.dataTransfer.setData('text', e.target.id);
};
oBox1.ondrop = dropImg;
oBox2.ondrop = dropImg;
};
関数 dropImg(e){
e.preventDefault();
var tempImg = document.getElementById(e.dataTransfer.getData('text'));
e.target.appendChild(tempImg);
}

知識ポイントを含む

ドラッグアンドドロップのプロセス中に次のイベントがトリガーされます:
ドラッグターゲット (ソース要素) でイベントをトリガーします
ondragstart - ユーザーが開始します要素のドラッグトリガー条件
ondrag - 要素がドラッグされているときにトリガーされます
ondragend - ユーザーが要素のドラッグを終了した後にトリガーされます

ターゲットが解放されたときにトリガーされるイベント
ondragenter - このイベントは、マウスでドラッグされたオブジェクトがコンテナースコープに入ったときにトリガーされます
ondragover - オブジェクトが解放されたときにトリガーされますドラッグされていますこのイベントは、ドラッグされたオブジェクトが別のオブジェクトのコンテナ範囲内にドラッグされるとトリガーされます
ondragleave - このイベントは、マウスでドラッグされているオブジェクトがコンテナ範囲を離れるとトリガーされます
ondrop - ドラッグプロセス中に、このイベントは、マウスボタンが放されたときにトリガーされます

イベントオブジェクト (e に置き換えられます)

e.ターゲット

W3Cschool の説明は次のとおりです: このイベントをトリガーした要素 (イベントのターゲットノード) を返します。このターゲット属性は ie9 以降とのみ互換性があります。

e.preventDefault()

イベントのデフォルトのアクションをキャンセルします。

e.dataTransfer.setData()

ドラッグしたデータのデータ型と値を設定します:

コードをコピーします

コードは次のとおりです:

e. dataTransfer.setData("Text",ev.target.id); //最初のパラメータは Text (小文字も許容されます)

e.dataTransfer.getData()

ドラッグされたデータを取得します: