指定エリア間ドラッグアンドドロップで画像を移動

仕様

jqueryとjquery-uiでドラッグ・アンド・ドロップをする
画像サンプルはplacehold.jpを利用
画像を掴み、移動可能な場所は黄色くなる
移動できない場合は元のエリアに戻る

ソース

HTML

test_6.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="test_6.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="test_6.js"></script>
<title>test_6 指定エリア間ドラッグアンドドロップで画像を移動</title>
</head>
<body>
<div class="droparea">複数おける
<img class="dragItem" src="https://placehold.jp/ffc0c0/000000/100x100.png?text=1">
<img class="dragItem" src="https://placehold.jp/c0ffc0/000000/200x150.png?text=2">
</div>
<div class="droparea dropone">ひとつだけ
<img class="dragItem" src="https://placehold.jp/c0c0ff/000000/50x200.png?text=3">
</div>
<div class="droparea dropone">ひとつだけ
</div>
</body>
</html>

CSS

test_6.css

.droparea{
  border:solid 1px #000000;
  float:left;
  width:30%;
  height:200px;
}
.imgover{
  background-Color:yellow;
}

javascript

test_6.js

function modDroparea(){
  $('.droparea').each(function(){
    var me=$(this);
    me.droppable({
      "disabled":me.find('.dragItem').length>0 && me.hasClass("dropone"),
    });
  });
}
$(function(){
  $('.dragItem').draggable({
    "revert":'invalid',
    "zIndex":'1000',
  });
  modDroparea();
  $('.droparea').droppable({
    "hoverClass":'imgover',
      "accept": '.dragItem',
    "drop": function(e, ui){
      ui.draggable.prependTo(this).css({top:'0',left:'0'});
      modDroparea();
    },
  });
});