Отключить определенный jQuery, перетаскиваемый из многих после того, как этот конкретный элемент был отброшен - PullRequest
Новая
       28

Отключить определенный jQuery, перетаскиваемый из многих после того, как этот конкретный элемент был отброшен

1 голос
/ 29 февраля 2012

Я пытаюсь использовать jQuery, перетаскиваемый и сбрасываемый для сравнения результатов поиска.В основном я ограничиваю сравнение до 5 пунктов.Итак, у меня есть 5 коробок и несколько перетаскиваемых изображений, которые будут помещены в эти коробки.Я пытаюсь сделать так, чтобы при заполнении коробочки с каплями она не могла быть снова заполнена, а предмет, который был перетащен в нее, не мог быть перенесен снова.Перетаскиваемый элемент возвращается в отключенное состояние.Мне удалось отключить последний отброшенный элемент, но второй результат вообще нельзя перетащить.Итак, мой вопрос: Как я могу отключить перетаскивание для определенного изображения после того, как это изображение было удалено, и все еще разрешить помещать другие результаты в оставшиеся поля? Кроме того, заполненный сбрасываемый div не должен бытьможет содержать более одного изображения.Существует много кода, поэтому вы можете найти демо здесь http://jsfiddle.net/SeasonEnds/VNzrB/

1 Ответ

2 голосов
/ 29 февраля 2012

У вас есть несколько элементов с идентификатором productimage. Все, что я сделал, это изменил каждый экземпляр id="productimage" на class="productimage", а затем изменил свой JS для выбора на основе класса, а не 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/

...