HiiHahWIKI - making some notes for... -
JavaScript：ドラッグアンドドロップサンプル
をテンプレートにして作成
開始行:
*JavaScript：ブラウザ間のドラッグアンドドロップサンプル [...
ブラウザ上のテキスト、リンク等を選択し、ドラッグアンドド...
ポイントは以下の通り
-onDropのイベントで、event.dataTransferを使用します。
-event.dataTransfer.typesから、取得可能なデータのtypeが配...
-event.dataTransfer.getData(type)でデータが取れる
ちなみに、ファイルとかもドロップできますが、データは出力...
***コード [#r5785c55]
こんな感じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drag & Drop Sample</title>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Drag & Drop Sample</h1>
</div>
</header>
<section id="main">
<p>他のブラウザからテキスト、リンク等をドラッグアンドド...
ドロップ領域
<div id="drop" style="width:500; height:500px; padding:...
<script type="text/javascript">
if (navigator.userAgent.match("MSIE")){
console.log(navigator.userAgent);
}
var disp = document.getElementById("disp");
function onDrop(event){
var out = "";
console.log("types : " + event.dataTransfer.ty...
for(var i = 0 ; i < event.dataTransfer.types.length; i...
var type = event.dataTransfer.types[i];
console.log(type + " : "+ event.dataTransfer.getData(...
out = out + type + " : " + event.dataTransfer.getDat...
}
drop.innerHTML = out;
//console.log(out);
if (navigator.userAgent.match("MSIE")){
event.preventDefault();
return false;
}
else{
event.preventDefault();
}
}
function onDragOver(event){
if (navigator.userAgent.match("MSIE")){
event.preventDefault();
return false;
}
else{
event.preventDefault();
}
}
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>
終了行:
*JavaScript：ブラウザ間のドラッグアンドドロップサンプル [...
ブラウザ上のテキスト、リンク等を選択し、ドラッグアンドド...
ポイントは以下の通り
-onDropのイベントで、event.dataTransferを使用します。
-event.dataTransfer.typesから、取得可能なデータのtypeが配...
-event.dataTransfer.getData(type)でデータが取れる
ちなみに、ファイルとかもドロップできますが、データは出力...
***コード [#r5785c55]
こんな感じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drag & Drop Sample</title>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Drag & Drop Sample</h1>
</div>
</header>
<section id="main">
<p>他のブラウザからテキスト、リンク等をドラッグアンドド...
ドロップ領域
<div id="drop" style="width:500; height:500px; padding:...
<script type="text/javascript">
if (navigator.userAgent.match("MSIE")){
console.log(navigator.userAgent);
}
var disp = document.getElementById("disp");
function onDrop(event){
var out = "";
console.log("types : " + event.dataTransfer.ty...
for(var i = 0 ; i < event.dataTransfer.types.length; i...
var type = event.dataTransfer.types[i];
console.log(type + " : "+ event.dataTransfer.getData(...
out = out + type + " : " + event.dataTransfer.getDat...
}
drop.innerHTML = out;
//console.log(out);
if (navigator.userAgent.match("MSIE")){
event.preventDefault();
return false;
}
else{
event.preventDefault();
}
}
function onDragOver(event){
if (navigator.userAgent.match("MSIE")){
event.preventDefault();
return false;
}
else{
event.preventDefault();
}
}
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>
ページ名:
