指定エリア間ドラッグアンドドロップで画像を移動
仕様
- 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();
},
});
});