HTML5API Drag&Dropを使ってみた

ただいまHTML5を勉強中。新しい要素とかコンテンツ・モデルとかマークアップの部分はだいぶ覚えたけどAPIがまだまだ。
だってJavaScript全然わかんないんだもん。JavaScriptも勉強します。

以下試しに書いてみたコード。(Chromeでは動きます。他のブラウザで動かないよって人は教えてください。)

ソースコード

[css title="CSS"]
.ball {
width: 60px;
height: 60px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
float: left;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.indigo {
background-color: indigo;
}
.purple {
background-color: purple;
}

#srcarea {
height: 60px;
width: 420px;
border: 3px solid black;
margin: 10px;
padding: 10px;
}
#droparea {
height: 60px;
width: 420px;
border: 3px dashed gray;
margin: 10px;
padding: 10px;
}
button {
width: 80px;
height: 30px;
margin: 10px;
font-size: 12px;
}
[draggable=true] {
-khtml-user-drag: element;
}
[/css]
[js title="JavaScript"]
(function(){

window.addEventListener("load", function(){
var els = document.querySelectorAll('#srcarea [class*=ball]');
for(var i=0; i<els.length; i++){
els[i].addEventListener('dragstart', function(evt){
var elm = evt.target;
evt.dataTransfer.setData('Text', elm.id);
evt.stopPropagation();
}, false);
}
var droparea = document.getElementById("droparea");
droparea.addEventListener("dragenter", function(evt){
evt.preventDefault();
}, false);
droparea.addEventListener("dragover", function(evt){
evt.preventDefault();
}, false);
droparea.addEventListener("drop", function(evt){
var elm = evt.target;
var id = evt.dataTransfer.getData('Text');
var target = document.getElementById(id);
if(target){
droparea.appendChild(target);
}
evt.preventDefault();
}, false);
}, false);
})();
[/js]
[html title="HTML"]
<div id="srcarea">
<div id="item1" class="ball red" draggable="true"></div>
<div id="item2" class="ball orange" draggable="true"></div>
<div id="item3" class="ball yellow" draggable="true"></div>
<div id="item4" class="ball green" draggable="true"></div>
<div id="item5" class="ball blue" draggable="true"></div>
<div id="item6" class="ball indigo" draggable="true"></div>
<div id="item7" class="ball purple" draggable="true"></div>
</div>
<div id="droparea"></div>
[/html]

HTML5おもしろいなあ。JavaScript書けるようになりたい。

追記:スマホだと動いてくれなかったorz
フレキシブルコンテンツ(レスポンシブWebデザイン)にしてDrag&Dropできるようにするのが課題。

LINEで送る
Pocket

コメントを残す

*