在删除特定项目后禁用特定的 jQuery 可拖动

Question

我正在尝试使用 jQuery 可拖动和可放置来比较搜索结果。基本上，我将比较限制为 5 个项目。所以，我有 5 个可放置的框和一些可拖放到这些框中的图像。我试图确保当一个可放置的框已满时，它不能被重新填充，并且被拖入其中的项目不能被再次拖动。可拖动项目恢复为禁用状态。我设法禁用了最后一个放置的项目，但第二个结果根本无法拖动。所以，我的问题是：如何在删除特定图像后禁用拖动该图像，并且仍然允许将其他结果放入剩余的框中？此外，填充的可放置 div 不应该能够包含多个图像。涉及的代码很多，你可以在这里找到一个演示http://jsfiddle.net/SeasonEnds/VNzrB/

Answer 1

您有多个 ID 为 productimage 的元素。我所做的只是将id="productimage" 的每个实例更改为class="productimage"，然后将您的JS 更改为基于类而不是ID 进行选择。当浏览器通过 ID 查找元素时，一旦找到，浏览器就会停止查找，因为它假定每个 ID 都是唯一的：

var $gallery = $(".productimage"),

...

accept: ".productimage > .icon",

http://jsfiddle.net/jasper/VNzrB/1/

这将使每个draggable 元素都可以拖动。要做到这一点，您只能在 droppable 元素中放置一个 draggable，您可以在将某些东西放入其中时禁用每个 droppable 元素：

    drop: function(event, ui) {
        deleteImage(ui.helper);
        $(ui.draggable).draggable('disable');

        //disable the droppable element that just had a draggable dropped into it
        $(this).droppable('disable');
    }

这是一个演示：http://jsfiddle.net/jasper/VNzrB/3/

更新

要仅更改克隆的 draggable 助手的高度/宽度，您可以将其定位为：$(ui.helper).css(...);。

变化：

    start: function() {

        $(".myCheckbox").prop("checked", true);
        $(".ui-draggable").not(this).css({
            height: 50,
            width: 50
        });
    },

收件人：

    start: function(event, ui) {

        $(".myCheckbox").prop("checked", true);
        $(ui.helper).css({
            height: 50,
            width: 50
        });
    }

请注意，您必须这样做

在此处查看此更新：http://jsfiddle.net/jasper/VNzrB/4/