この記事の内容は、HTML5/"> HTML5にHTML要素ドラッグ関数を実装する方法に関するものです。HTML5の前にドラッグアンドドロップを実装するには、JSを使用する必要があります。HTML5はドラッグアンドドロップ機能を内部的にサポートしますが、わずかに複雑な機能を実装するには、JSは不可解です。
1.ドラッグオブジェクトを作成しますDraggable属性を介してブラウザに、ドラッグアンドドロップ機能を実装するために必要な要素を伝えることができます。 Draggableには3つの値があります。true：要素をドラッグできます。 FALSE：要素をドラッグできません。 Auto：ブラウザは、要素を単独でドラッグできるかどうかを決定します。
システムのデフォルト値はAUTOですが、ブラウザは以下など、AUTOの場合の異なる要素の異なるドラッグアンドドロップ関数をサポートします。したがって、要素をドラッグする必要がある場合は、DraggaleをTrueに設定することをお勧めします。以下の例を見てみましょう。
<！doctype html>
<html>
<head>
<title>例</title>
<style>
#src> *
{
フロート：左;
}
#target、#src> img
{
境界線：薄い固体黒;
パディング：2px;
マージン：4px;
}
＃ターゲット
{
高さ：123px;
幅：220px;
テキストアライグ：センター;
表示：テーブル;
}
#target> p
{
ディスプレイ：テーブルセル;
垂直アライイン：中央;
}
#target> img
{
マージン：1px;
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "ターゲット">
<p id = "msg">
ここにドロップ</p>
</div>
</div>
<スクリプト>
var src = document.getElementById（ "src"）;
var target = document.getElementById（ "ターゲット"）;
</script>
</body>
</html>
ランニング効果：
2.ドラッグアンドドロップイベントを処理します次に、ドラッグに関連するイベントを理解しましょう。イベントには2つのタイプがあります。1つはドラッグオブジェクトのイベントで、もう1つはドロップエリアのイベントです。ドラッグイベントは次のとおりです。Dragstart：要素ドラッグが起動したときにトリガーされます。ドラッグ：要素ドラッグ中にトリガーされます。 Dragend：要素ドラッグが終了するとトリガーされます。以下の例を見てみましょう。
<！doctype html>
<html>
<head>
<title>例</title>
<style>
#src> *
{
フロート：左;
}
#target、#src> img
{
境界線：薄い固体黒;
パディング：2px;
マージン：4px;
}
＃ターゲット
{
高さ：123px;
幅：220px;
テキストアライグ：センター;
表示：テーブル;
}
#target> p
{
ディスプレイ：テーブルセル;
垂直アライイン：中央;
}
#target> img
{
マージン：1px;
}
img.dragged
{
背景色：オレンジ;
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "ターゲット">
<p id = "msg">
ここにドロップ</p>
</div>
</div>
<スクリプト>
var src = document.getElementById（ "src"）;
var target = document.getElementById（ "ターゲット"）;
var msg = document.getElementById（ "MSG"）;
src.ondragstart = function（e）{
e.target.classlist.add（ "ドラッグ"）;
}
src.ondragend = function（e）{
e.target.classlist.remove（ "ドラッグ"）;
msg.innerhtml = "Drop Here";
}
src.ondrag = function（e）{
msg.innerhtml = e.target.id;
}
</script>
</body>
</html>
ランニング効果：
3.配達エリアを作成します配信エリアに関連するイベントを見てみましょう。ドラッグスター：ドラッグオブジェクトが配信エリアに入るときにトリガーされます。 Dragover：ドラッグオブジェクトが配信エリアで移動するとトリガーされます。 DragLeave：ドラッグオブジェクトは配信エリアに配信されず、配信エリアを離れるとトリガーされます。ドロップ：ドラッグオブジェクトが配信エリアに配置されたときにトリガーされます。
例を見てみましょう：
<！doctype html>
<html>
<head>
<title>例</title>
<style>
#src> *
{
フロート：左;
}
#target、#src> img
{
境界線：薄い固体黒;
パディング：2px;
マージン：4px;
}
＃ターゲット
{
高さ：123px;
幅：220px;
テキストアライグ：センター;
表示：テーブル;
}
#target> p
{
ディスプレイ：テーブルセル;
垂直アライイン：中央;
}
#target> img
{
マージン：1px;
}
img.dragged
{
背景色：Lightgrey;
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "ターゲット">
<p id = "msg">
ここにドロップ</p>
</div>
</div>
<スクリプト>
var src = document.getElementById（ "src"）;
var target = document.getElementById（ "ターゲット"）;
var msg = document.getElementById（ "MSG"）;
var draggedid;
Target.Ondagenter = handledRag;
Target.Ondragover = handledRag;
function handledRag（e）{
E.PreventDefault（）;
}
Target.Ondrop = function（e）{
var newelem = document.getElementById（radgedId）.CloneNode（false）;
Target.innerhtml = "";
Target.AppendChild（NewElem）;
E.PreventDefault（）;
}
src.ondragstart = function（e）{
draggedId = e.target.id;
e.target.classlist.add（ "ドラッグ"）;
}
src.ondragend = function（e）{
var elems = document.queryselectorall（ "。ドラッグ"）;
for（var i = 0; i <elems.length; i ++）{
Elems [i] .classlist.remove（ "ドラッグ"）;
}
}
</script>
</body>
</html>
実行結果：
4.データトランスファーを使用しますDataTransferを使用して、ドラッグオブジェクトから配信エリアにデータを渡します。 DataTransferには次のプロパティと方法があります。タイプ：データの形式を返します。 getData（<format>）：指定された形式データを返します。 SetData（<format>、<data>）：指定された形式データを設定します。 ClearData（<format>）：指定された形式データを削除します。ファイル：配信されたファイル配列を返します。
次の例を見てみましょう。達成した効果は例3と同じです。
<！doctype html>
<html>
<head>
<title>例</title>
<style>
#src> *
{
フロート：左;
}
#src> img
{
境界線：薄い固体黒;
パディング：2px;
マージン：4px;
}
＃ターゲット
{
境界線：薄い固体黒;
マージン：4px;
}
＃ターゲット
{
高さ：123px;
幅：220px;
テキストアライグ：センター;
表示：テーブル;
}
#target> p
{
ディスプレイ：テーブルセル;
垂直アライイン：中央;
}
img.dragged
{
背景色：オレンジ;
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "ターゲット">
<p id = "msg">
ここにドロップ</p>
</div>
</div>
<スクリプト>
var src = document.getElementById（ "src"）;
var target = document.getElementById（ "ターゲット"）;
Target.Ondagenter = handledRag;
Target.Ondragover = handledRag;
function handledRag（e）{
E.PreventDefault（）;
}
Target.Ondrop = function（e）{
var droppedId = e.datatransfer.getData（ "Text"）;
var newelem = document.getElementById（droppedId）.CloneNode（false）;
Target.innerhtml = "";
Target.AppendChild（NewElem）;
E.PreventDefault（）;
}
src.ondragstart = function（e）{
e.datatransfer.setData（ "Text"、E.Target.id）;
e.target.classlist.add（ "ドラッグ"）;
}
src.ondragend = function（e）{
var elems = document.queryselectorall（ "。ドラッグ"）;
for（var i = 0; i <elems.length; i ++）{
Elems [i] .classlist.remove（ "ドラッグ"）;
}
}
</script>
</body>
</html>
5。ファイルをドラッグアンドドロップしますHTML5はファイルAPIをサポートしています。これにより、ローカルファイルを操作できます。通常、ファイルAPIを直接使用しません。次の例に示すように、ドラッグとドロップの効果を組み合わせるなど、他の機能と組み合わせて使用できます。
<！doctype html>
<html>
<head>
<title>例</title>
<style>
ボディ> *
{
フロート：左;
}
＃ターゲット
{
ボーダー：中程度のダブルブラック。
マージン：4px;
高さ：75px;
幅：200px;
テキストアライグ：センター;
表示：テーブル;
}
#target> p
{
ディスプレイ：テーブルセル;
垂直アライイン：中央;
}
テーブル
{
マージン：4px;
国境崩壊：崩壊;
}
Th、TD
{
パディング：4px;
}
</style>
</head>
<body>
<div id = "ターゲット">
<p id = "msg">
ここにファイルをドロップします</p>
</div>
<表ID = "データ">
</table>
<スクリプト>
var target = document.getElementById（ "ターゲット"）;
Target.Ondagenter = handledRag;
Target.Ondragover = handledRag;
function handledRag（e）{
E.PreventDefault（）;
}
Target.Ondrop = function（e）{
var files = e.datatransfer.files;
var tableElem = document.getElementById（ "データ"）;
tableElem.innerhtml = "<tr> <th> name </th> <th> type </th> <th> size </th> </tr>";
for（var i = 0; i <files.length; i ++）{
var row = "<tr> <td>" + files [i] .name + "</td> <td>" + files [i] .type + "</td> <td>" + files [i] .size + "</td> </tr>";
tableElem.innerhtml += row;
}
E.PreventDefault（）;
}
</script>
</body>
</html>
datAtransferは、ファイル配列オブジェクトとして扱うことができるファイルリストオブジェクトを返し、ファイルには次のプロパティが含まれています。名前：ファイル名。タイプ：ファイルタイプ（mimeタイプ）;サイズ：ファイルサイズ。
ランニング効果：
6。ファイルをアップロードします以下は、Ajaxをドラッグしてドロップすることにより、ファイルをアップロードする例です。
<！doctype html>
<html>
<head>
<title>例</title>
<style>
。テーブル
{
表示：テーブル;
}
。行
{
ディスプレイ：テーブルロー;
}
。細胞
{
ディスプレイ：テーブルセル;
パディング：5px;
}
。ラベル
{
テキストアライグ：右;
}
＃ターゲット
{
ボーダー：中程度のダブルブラック。
マージン：4px;
高さ：50px;
幅：200px;
テキストアライグ：センター;
表示：テーブル;
}
#target> p
{
ディスプレイ：テーブルセル;
垂直アライイン：中央;
}
</style>
</head>
<body>
<form id = "furtform" method = "post" action = "/uploadhandler.ashx">
<div>
<div>
<div>
バナナ：</div>
<div>
<input name = "bananas" value = "2" /> < /div>
</div>
<div>
<div>
リンゴ：</div>
<div>
<入力名= "Apples" value = "5" /> < /div>
</div>
<div>
<div>
チェリー：</div>
<div>
<input name = "cherries" value = "20" /> < /div>
</div>
<div>
<div>
ファイル：</div>
<div>
<入力型= "file" name = "file" /> < /div>
</div>
<div>
<div>
合計：</div>
<div id = "results">
アイテム</div>
</div>
</div>
<div id = "ターゲット">
<p id = "msg">
ここにファイルをドロップします</p>
</div>
<ボタンid = "submit" type = "submit">
フォームを送信</button>
</form>
<script type = "text/javascript">
var target = document.getElementById（ "ターゲット"）;
var httprequest;
var Filelist;
Target.Ondagenter = handledRag;
Target.Ondragover = handledRag;
function handledRag（e）{
E.PreventDefault（）;
}
Target.Ondrop = function（e）{
filelist = e.datatransfer.files;
E.PreventDefault（）;
}
document.getElementById（ "Submit"）。onClick = function handlebuttonpress（e）{
E.PreventDefault（）;
var form = document.getElementById（ "Fruitform"）;
var formdata = new formdata（form）;
if（filelist）{
for（var i = 0; i <filelist.length; i ++）{
formdata.append（ "file" + i、filelist [i]）;
}
}
httpRequest = new XMLHTTPREQUEST（）;
httprequest.onededystatechange = handleresponse;
httprequest.open（ "post"、form.action）;
httprequest.send（formdata）;
}
function handleresponse（）{
if（httprequest.readystate == 4 && httprequest.status == 200）{
var data = json.parse（httprequest.responsetext）;
document.getElementById（ "results"）。innerhtml = "your sorged" + data.total + "items";
}
}
</script>
</body>
</html>
効果：
上記の例のいくつかは、異なるブラウザを実行している場合があります。 Chromeブラウザを使用しています。複数のファイルをサポートしていない例5および6を除き、他の例は正常に実行されます。デモをダウンロードできます。
デモのダウンロードアドレス：html5guide.draggable.rar