jQuery ui 克隆主要可拖动并使克隆也可拖动

Question

我在页面顶部有 2 个可拖动元素

X

和

O

，在它们下面有一个 3x3 的可放置网格。我希望能够将

X

或

O

克隆到其中一个网格单元格，并能够将可拖动的克隆元素拖动到其他网格单元格。

例如，当我将

X

拖到左上角的单元格时，它应该被克隆到那个单元格，我仍然会将该克隆的元素拖到第二个单元格。

类似的东西：

__________________________________________________________
|                      X      O                          |
|________________________________________________________|

_________________
|  X  |    |    |
|_____|____|____|
|     |    |    |
|_____|____|____|
|     |    |    |
|_____|____|____|

_________________
|     |  X |    |
|_____|____|____|
|     |    |    |
|_____|____|____|
|     |    |    |
|_____|____|____|

这是一个实时小提琴来进行更改和测试：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;
}

.ui-droppable-active {
    background: #65a167;
}

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>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
</div>

j查询：

$(".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');
    }
});


$('.disabled').droppable('disable');

问题是我不能拖放克隆的元素后。我试图添加这个

cloned.draggable();

它被注释掉以使该元素可拖动但问题是我可以将它拖动到禁用和其他已经包含克隆元素的单元格并且元素被拖出的单元格被禁用。

我希望每个单元格只包含一个拖动的元素，如果我将元素移动到另一个单元格，它不应该被禁用。