Question

使用jQuery UI，我只是使用draggable和droppable设置了一个简单的测试

HTML：

<div>
    <img src="img/2.jpg" alt="Donut" id="a" class="drag"><span id="4" class="drop" >Eclair</span>
</div>
<div>
    <img src="img/3.jpg" alt="Eclair" id="b" class="drag"><span id="3" class="drop">Donut</span>
</div>

我正在尝试拖动第一个图像并放入相关的范围。如果我将第一个图像拖放到id="4"，它应该恢复到原始位置。同样，当我拖放第二个图像时id="3"处的图片应该恢复到原来的位置。

脚本：

$(function () {
    $("#a").draggable({
        revert: "valid",
    });
    $("#b").draggable({
        revert: "invalid",
    });
    $(".drop").droppable({
         accept: '.drop',
    });
});

我可以拖动图像，但不能将其放在正确的位置。我做错了什么？

的CSS：

.drag,.drop{
    width:130px !important;
    height: 130px !important;
    border:2px solid !important;
    margin-top:10px !important;
    margin-left: 15% !important;
}
.drop{
    float: right !important;
    margin-right: 30% !important;
}

https://jsfiddle.net/jjewhwLt/

Answer 1

您需要将元素设置得有点不同，将draggable()添加到.drag类，然后您可以将droppable()附加到.drag元素。我还为拖放元素添加了data-id以便能够匹配它们。我希望这是你正在寻找的东西：

更新了 FIDDLE 。

$(".drag").draggable({
  revert: 'invalid'
});
$(".drop").droppable({
  accept: function(drag) {
    var drop_id = $(this).attr('data-id');
    var drag_id = $(drag).attr('data-id');
    return drop_id === drag_id;
  }
});

Answer 2

我在这里理解这个问题时遇到了一些麻烦，但我会尽力解释我认为你想要实现的目标。

我建议将来开始明确你要做的事情，这样你自己就可以在工作的时候理解它。像“A”和“B”，“3”和“4”这样的东西将会非常快速地与您正在处理的东西混淆。

我从中得到的是你试图让每个容器接受它的相应图像。这是你的jsfiddle的清理版本：https://jsfiddle.net/8hr3vf3L/

我首先将HTML中的图像+拖放区域分开，然后替换了用占位符打破的图像：

<div class="images">
  <img src="http://placehold.it/120?text=donut" alt="Donut" id="donut" class="drag">
  <img src="http://placehold.it/120?text=eclair" alt="Eclair" id="eclair" class="drag">
</div>

<div class="drop-areas">
  <div class="drop-area" id="eclairArea">Eclair</div>
  <div class="drop-area" id="donutArea">Donut</div>
</div>

然后稍微清理CSS以使其更通用：

.drop-areas {
  margin-top: 40px;
}
.drop-area,
.drag {
  display: inline-block;
  width: 120px;
  height: 120px;
  border: 2px solid black;
  margin-right: 20px;
}
.drag { border: none; }

然后最后你的JS，我希望现在对你更有意义。 revert函数中的draggable在命名为invalid时会将广场发回原来的位置，如果它不在接受它的区域，{{1}函数，在这种情况下，我已经分离出来以使你更有意义，但我可以假设，以编程方式检查正在删除的图像。如您所见，droppable已设置最多只接受#eclairArea，反之亦然。

#eclair

jQuery使用revert拖放

2 个答案: