Jquery 仅当可拖放元素为空时，才启用可拖放元素以接受可拖放项

在这方面，我有一个问题。让我描述一下

当我将任何包含“N”的元素拖动到其他

时，效果良好。但在那之后，当我试图将任何元素拖动到它的原始位置时，它就不起作用了

我的期望：当任何元素被移动到其他位置时，必须允许旧位置接受其他元素

代码如下：

$(function () {
  $(".dragDiv").draggable({
    create: function () {
        $(this).data('position', $(this).position())
    },
    revert: 'invalid',
    stop: function () {
        $(this).draggable('option', 'revert', 'invalid');
    }
  });
  $('.dragDiv').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function (event, ui) {
        ui.draggable.draggable('option', 'revert', true);
    }
  });
  $(".mainTable tr td").droppable({
    drop: function (event, ui) {
        console.log(JSON.stringify($(this).attr('id')));
        console.log(JSON.stringify(ui.draggable.attr("id")));
        snapToMiddle(ui.draggable, $(this));
    },
    accept: function () {
        return $(this).find("*").length == 0;
    }
  });
});
function snapToMiddle(dragger, target) {
  var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
  var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
  dragger.animate({
    top: topMove,
    left: leftMove
  }, {
    duration: 100,
    easing: 'easeOutBack'
  });
}

---

问题是jQuery UI Dragable小部件实际上并没有将元素附加到Dropable on drop，它只是操纵CSS定位属性，因此

$（this）.find（“*”）.length==0将为false，即使该项被放入另一个可拖放项中

您可以通过手动将Dragable附加到Dropable来修复此问题

此外，您还可以使用实用工具方法轻松地将可拖动对象相对于可拖放对象居中



$（函数（）{
$（“.dragDiv”）.draggable({
回复：“无效”
});
$（“.mainTable tr td”）.dropable({
接受：函数（）{
返回$（this.find（“*”）。长度==0；
},
drop：函数（事件、用户界面）{
var$this=$（this）；
$this.append（ui.draggable.css({
/*手动附加元素
和重置定位*/
排名：0，
左：0
}));
ui.draggable.position({
我的“中心”，
在“中心”，
其中：，
使用：功能（pos）{
$（此）。动画（位置100，“easeOutBack”）；
}
});
}
});
});
.main表{
保证金：20px自动；
填充：0px；
}
.mainTable tr td{
宽度：100px；
高度：100px；
}
德拉格迪夫先生{
文本对齐：居中；
背景色：#00ABA9；
高度：50px；
垂直对齐：中间对齐；
保证金：自动；
位置：相对位置；
宽度：50%；
}

N
N
N
非常感谢。您按照我的意愿给出了解决方案。在子元素被拖走后，我可以将“”设置为可拖放元素吗？@Napster默认情况下，您不能在
td
中放置一个
。。？听起来像是一个
xy
问题。也许这是可以通过css修复的东西。。？