Подскажите, как с помощью Drag and Drop, создать перемещение прямоугольников как на схеме?
Оранжевый квадрат можно перетянуть только в синий.
Синий квадрат можно перетянуть только в зеленый, со всем его содержанием ( то есть, если в синем квадрате находится оранжевый, то если его переместить в зеленый, синий переместиться вместе с ним)
Так же и назад, что бы можно было вытягивать блоки.
$(document).ready(function () {
$("div.black, div.red").draggable({
revert: "invalid",
helper: 'clone'
});
var a_drop = $("div.red, div.blue");
a_drop.droppable({
drop: function (ev, ui) {
if ($(ui.draggable).hasClass('new')) {
$('.new').draggable({
revert: true
});
} else {
$(this).append($(ui.draggable).clone().draggable({
helper: "original"
}).addClass('new'));
}
},
out: function (event, ui) {
$(ui.draggable).fadeOut(1000, function () {
$(this).remove();
});
},
hoverClass: "ui-state-hover"
});
$("div.red").droppable({
accept: "div.black"
});
$("div.blue").droppable({
accept: "div.red"
});
});
.wrapper {
width: 600px;
margin: 0 auto;
}
.all_black{
float: left;
margin: 20px;
}
.all_red{
float: left;
margin: 20px;
}
.all_blue{
float: left;
margin: 20px;
}
.black {
height:80px;
width:80px;
background-color: #000000;
border:1px solid rgba(79, 106, 125, 0.48);
color: #000000;
padding:5px;
margin: 25px;
}
.red {
height:80px;
width:90px;
background-color: #ff0000;
border:1px solid rgba(227, 142, 136, 0.48);
color: #ff0000;
padding:5px;
margin: 25px;
}
.blue {
height:80px;
width:100px;
background-color: #000dff;
border:1px solid #9bd0ff;
color: #000dff;
padding:5px;
margin: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrapper">
<div class="all_black">
<div class="black"></div>
<div class="black"></div>
<div class="black"></div>
</div>
<div class="all_red">
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
</div>
<div class="all_blue">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>
</div>