javascript ドラッグ＆ドロップ

前提・実現したいこと

ドラッグ＆ドロップのシステムを下記のソースを元に作っています。
http://www.htmq.com/dnd/
javascriptの勉強を始め壁にぶつかりました。

一つ要素が入っていると、追加で他の要素がドラッグ＆ドロップできないシステムを作成したいのですが、何分にも知識が乏しく方法論が浮かびません。解決の糸口をお教えください。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8> <title>ドラッグ＆ドロップ　サンプル</title> <style> #fruits { /*単なるスタイリング*/ width:200px; height:100px; margin:20px; background-color:#FF9966; border:1px solid #cc3333; } .room { /*単なるスタイリング*/ width:200px; height:100px; margin:20px; background-color:#CCFF66; border:1px solid #00cc00; /*以下はwebkit系ブラウザでドラッグ＆ドロップを動かすための指定（ブラウザのサポートが進めば、必要なくなると思われます）*/ -khtml-user-drag: element; } </style> <script> /***** ドラッグ開始時の処理 *****/ function f_dragstart(event){ //ドラッグするデータのid名をDataTransferオブジェクトにセット event.dataTransfer.setData("text", event.target.id); }

/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
function f_dragover(event){
//dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
event.preventDefault();
}

/***** ドロップ時の処理 *****/
function f_drop(event){
//ドラッグされたデータのid名をDataTransferオブジェクトから取得
var id_name = event.dataTransfer.getData("text");
//id名からドラッグされた要素を取得
var drag_elm =document.getElementById(id_name);
//ドロップ先にドラッグされた要素を追加
event.currentTarget.appendChild(drag_elm);

//エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
event.preventDefault();
}

</script> </head> <body> <div id="room100" class="room" ondragover="f_dragover(event)" ondrop="f_drop(event)" > <div id="12" draggable="true" ondragstart="f_dragstart(event)">中田</div> <div id="14" draggable="true" ondragstart="f_dragstart(event)">吉田</div> </div> <p>下のボックスに入れてください。</p> <div id="room101" class="room" ondragover="f_dragover(event)" ondrop="f_drop(event)" > </div> <div id="room102" class="room" ondragover="f_dragover(event)" ondrop="f_drop(event)"> </div> </body> </html>

試したこと

<div id="room" ondragover="f_dragover(event)" ondrop="f_drop(event)" ondragend="f_dragend(event)" > </div>内に子要素がなければ、ドロップ可能にと

function f_drop(event){
var bo = document.querySelector('div');
if(bo.children===null){
//ドラッグされたデータのid名をDataTransferオブジェクトから取得
var id_name = event.dataTransfer.getData("text");
//id名からドラッグされた要素を取得
var drag_elm =document.getElementById(id_name);
//ドロップ先にドラッグされた要素を追加
event.currentTarget.appendChild(drag_elm);

//エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
event.preventDefault();
}
}
に変更したのですが、全く動作しなくなりました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

まずはjQuery-uiで処理してみてください

javascript
1<style>
2.droparea{
3  border:solid 1px #000000;
4  float:left;
5  width:30%;
6  height:200px;
7}
8.imgover{
9  background-Color:lime;
10}
11</style>
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
13<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
14<script>
15function modDroparea(){
16  $('.droparea').each(function(){
17    var me=$(this);
18    me.droppable({
19      "disabled":me.find('.dragItem').length>0 && me.hasClass("dropone"),
20    });
21  });
22}
23$(function(){
24  $('.dragItem').draggable({
25    "revert":'invalid',
26    "zIndex":'1000',
27  });
28  modDroparea();
29  $('.droparea').droppable({
30      "hoverClass":'imgover',
31      "accept": '.dragItem',
32      "drop": function(e, ui){
33        ui.draggable.prependTo(this).css({top:'0',left:'0'});
34        modDroparea();
35      },
36    });
37});
38</script>
39<div class="droparea">複数おける
40<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1" alt="1" class="dragItem">
41<img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=2" alt="2" class="dragItem">
42</div>
43<div class="droparea dropone">
44ひとつだけ
45</div>
46<div class="droparea dropone">
47ひとつだけ
48<img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=3" alt="3" class="dragItem">
49</div>