Question

我正在尝试使用jQuery draggable和droppable来比较搜索结果。基本上，我将比较限制为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元素都可以拖动。为了实现这一点，您只能在draggable元素中放置一个droppable，您可以在删除某些内容时禁用每个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/

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

1 个答案:

更新