操作的には全く何気なくやってる動作ですが
実際自分が作るとなると。。。。？そもそも作るって概念など今まで持ち合わせていませんでした。
今日はオンラインサイトUdemyを参考にドラッグアンドドロップの画面を作ってみたので書いてみようと思います。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ちなみに意味はないんですがこのアザラシ？ちゃん画像を挿入してみようと思います。
完成形は↓
２つのボックスを用意して、片方のボックスから片方のボックスへマウスで移動させてみました。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ソースコード例）
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
<--2つのbodyタグ内で用意したdiv1,2ボックスのスタイルを指定していきます-->
#div1,#div2{
float:left;
width: 100px;
height: 50px;
margin: 10px;
padding: 10px;
border:1px solid black;
}
</style>
<--scriptタグ内にドラッグアンドドロップをやるための呪文を記述していきます-->
<script>
function allowDrop(ev){
ev.preventDefault();
}
//preventDefaultはエラー回避のため要記述
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//ドラッグするための動作
//※dataTransfer . setData(format, data) …… データをセットする
function drop(ev){
var data=ev.dataTransfer.getData("Text");
//ドロップされたデータを受け取り格納
//※data = dataTransfer . getData(format) …… データを取得する
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="c2.jpg" id ="drag1" width="95" height="45"
//c2.jpgは私のPCの中のアザラシちゃんの画像です。画像の大きさを指定divをドラッグアンドドロップする要素
draggable="true"ondragstart="drag(event)"></div>
//"true"でドラッグ可能
<div id="div2"ondrop="drop(event)" ondragover="allowDrop(event)"></div>
//div2にドロップするイベント
</body>
</html>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
いろいろその後調べてみたらこちらのサイトがすごく詳しかったです！
今日は昼過ぎまで爆睡してしまったおかげで頭はスッキリですがやっぱりプログラミングは難しいです。。。ちょっとずつ勉強続けていこうと思います☆
あと、微妙に意味がわからないことも新しいことをやるたびに出てくるので面倒くさがらず調べる癖をつけたいです。。
