jquery droppable -> избежать нескольких падений одного и того же объекта - PullRequest
Новая
       49

jquery droppable -> избежать нескольких падений одного и того же объекта

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

У меня есть контейнер с различными draggable -элементами, и есть список некоторых "целевых" div, где пользователь может отбрасывать перетаскиваемые элементы.

Пример: представьте, у вас есть список "тегов""(Дом, Компьютер, Автомобиль, ..) и список некоторых документов в качестве цели (все документы являются частью div <div id="doclist">).Поэтому цель состоит в том, чтобы назначить «теги» документу с помощью перетаскивания.Кстати, у каждого тега Div есть уникальный идентификатор (<div id="e34a568b2">)

Код для перетаскивания «тегов»: 

$('#taglist').find('div').draggable(
    {helper: "clone"});

Код для создания документов «сбрасываемым»:

$('#doclist').droppable({
        drop: function( event, ui )
                       {tag=ui.draggable;
                        tag.clone().appendTo( this );
                       } });

До сих пор это работало хорошо.Проблема в том, что прямо сейчас вы можете присвоить один и тот же тег несколько раз одним и тем же документам.Пример: документ 1 может получить тег «Дом» 5 раз, тег «Компьютер» 3 раза.

Моя цель - чтобы каждый документ мог иметь каждый тег только один раз.

Я не знаю, как решить эту проблему.Сейчас есть несколько способов:

1.) Расширить функцию «drop», пройдя через DOM $ (this) .find ..., чтобы увидеть, есть ли элемент с таким жеid - в этом случае не клонируйте и не добавляйте снова.Вероятно, это требует большой производительности.

2.) Используйте функцию перетаскивания перетаскиваемого виджета.Но я не знаю, как использовать это в этой ситуации.

Спасибо за любую помощь.

Ответы [ 2 ]

5 голосов
/ 14 февраля 2012

Во-первых, вы должны убедиться, что на странице никогда не будет двух элементов с одинаковым идентификатором.Поэтому при отбрасывании вы хотите каким-то образом изменить идентификатор, например: 

$('#doclist').droppable({
  drop: function( event, ui ) {
    tag=ui.draggable;
    tag.clone().attr("id", "copy-" + tag.attr("id")).appendTo( this );
  }
});

Далее, действительно, вы можете использовать accept и проверять DOM.Не волнуйтесь, я не думаю, что это будет слишком ресурсоемким.Что-то вроде: 

$('#doclist').droppable({
  drop: function( event, ui ) {
    tag=ui.draggable;
    tag.clone().attr("id", "copy-" + tag.attr("id")).appendTo( this );
  },
  accept: function(draggable) {
    return $(this).find("#copy-" + draggable.attr("id")).length == 0;
  }
});
0 голосов
/ 01 декабря 2013

Окей, поэтому я хотел немного улучшить этот код и добавить сообщение об ошибке, почему элемент не принимается.но он добавляет ошибку печати элемента, затем он не принимает, а затем никаких отпечатков, почему это происходит?Есть 2 ограничения:

  • Проверьте, не добавлен ли элемент дважды, если нет;

  • , затем проверьте, не превышает ли количество всех элементов больше 4 или равно?

    accept: function (draggable) {if ($ (this) .find ("# copy-" + draggable.attr ("menu-item-id")). Length == 0) {

        if($(this).find('li.dinamik').length>=4)
        {
            $("#errorMsg").show("slow", function(){ $(this).hide(6000);}).text("Can not have more than 4 items");
            return false;    
        } return true;
} else if($(this).find("#copy-" + draggable.attr("menu-item-id")).length >= 1)
    {
        $("#errorMsg").show("slow").text("Cant Duplicate"+draggable.text());
        return false;
    }

    }

...