Open
Description
I want to be able to clone the main draggable elements and be able to drag the cloned element as well.
You can run the code here: https://jsfiddle.net/2qatpe47/
CSS:
.header{
padding: 20px;
background: #000;
color: #fff;
text-align: center;
}
.drag{
background: red;
padding: 10px;
margin-right: 20px;
}
.zone{
width: 80%;
margin: 40px auto;
}
.drop{
display: inline-block;
width: 27%;
border: 1px solid #000;
height: 70px;
padding: 10px;
vertical-align: middle;
text-align: center;
}
.ui-droppable-disabled {
background: #494f54;
}
HTML:
<div class="header">
<span class="drag main">X</span>
<span class="drag main">O</span>
</div>
<div class="zone">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop disabled"></div> <!-- Droppable Disabled -->
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
jQuery:
$(".drag").draggable({
helper: "clone"
});
$(".drop").droppable({
accept: ".drag",
drop: function(event, ui) {
//If the dragged element is `X` or `O` on the top
if($(ui.draggable).hasClass('main')){
var cloned = $(ui.draggable).clone();
cloned.removeClass('main');
$(this).append(cloned);
//cloned.draggable();
}
$(this).droppable('disable');
},
out: function(event, ui) {
$(this).droppable('enable');
}
});
//Disable Droppable for elements with .disabled
$('.disabled').droppable('disable');
The issue is that I can't drag the cloned element after dropping it. I tried to add this cloned.draggable(); it's commented out to make that cloned element draggable but the issue is that I can drag it to disabled and to other cells which already contain cloned elements and the cell that element dragged out is disabled.
I want each cell to contain only one dragged element and if I move the element to another cell it shouldn't be disabled.