Clone draggable and make the cloned element draggable as well

[moataseme]

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.

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

[moataseme]

I tried different versions of jQuery UI and jQuery the same issue occurs. I'm not sure if this issue is related to jQuery UI functionality or jQuery version.

[mgol]

If the issue is already in UI 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.