Блог

Главная - Вопросы по программированию - Перетаскиваемый элемент исчезает после удаления с помощью ajax

Перетаскиваемый элемент исчезает после удаления с помощью ajax

#jquery #jquery-ui #jquery-ui-draggable #jquery-ui-droppable

#jquery #jquery-пользовательский интерфейс #jquery-ui-перетаскиваемый #jquery-ui-droppable

Вопрос:

У меня действительно проблемы с перетаскиванием jQuery. Итак, позвольте мне немного объяснить ситуацию.

Чего я хочу добиться, так это следующего: когда вы перетаскиваете одну из капель на временной шкале, идентификатор из div и идентификатор элемента, на который он был перенесен, должны сохраняться в моей базе данных сразу после удаления.

Мне удалось сделать это с помощью ajax, вот код:

 $('#dropzone ul li').droppable({
  drop: function(event, ui) {
        var day = $(".confirmday").val();
        var $drag = $(ui.draggable),
        var $drop = $(this);

        var drag = $drag.attr('id');
        var drop = $drop.attr('id');

        console.log(drag);

        if(drag == 'drag1')
        {
            drag = 'Medicijnen';
            werkwoord = ' ingenomen om ';
        }
        else if(drag == 'drag2')
        {
            drag = 'Snack';
            werkwoord = ' gegeten om ';
        }
        else if(drag == 'drag3')
        {
            drag = 'Frisdrank';
            werkwoord = ' gedronken om ';
        }
        else if(drag == 'drag4')
        {
            drag = 'Thee';
            werkwoord = ' gedronken om ';
        }
        else if(drag == 'drag5')
        {
            drag = 'Koffie';
            werkwoord = ' gedronken om ';
        }
        else if(drag == 'drag6')
        {
            drag = 'Alcohol';
            werkwoord = ' gedronken om ';
        }

        $.post("ajax/save.php", { 
                drag: drag,
                drop: drop,
                userid: <?php echo $_SESSION['id']; ?>,
                day: day},
                function(data) 
                {
                });
        return false;
    },
});

Но когда я это делаю, перетаскиваемый элемент (или клон этого элемента) просто исчезает. Я не знаю почему, потому что страница не обновляется. Новый элемент просто не будет сохранен.

Другой вариант, который я пробовал, заключался в том, чтобы поместить идентификатор перетаскиваемого элемента и идентификатор элемента dropped on в текстовое поле и сохранять это каждый раз, когда что-то отбрасывается. Но это также не сработает.

Я действительно надеюсь, что кто-нибудь сможет мне помочь! Заранее спасибо.

введите описание изображения здесь

Комментарии:

1. Я бы использовал switch оператор вместо этой цепочки else if s.

2. Я совершенно уверен, что вы не должны возвращать false после выполнения события drop. Также, похоже, в конце и после есть запятая $(ui.draggable) ..

3. Я также отреагировал на return false . Поскольку это сообщит jQuery UI droppable, что удаленный элемент недействителен, а затем отбросит его. Скорее всего, именно поэтому он исчезает.

Ответ №1:

Вы возвращаетесь false в конце drop обработчика обратного вызова.

Это сообщит удаляемому, что перетаскиваемый элемент был недействительным, и затем отбросит его. Если вы полностью удалите return , это должно сработать.

Я взял на себя смелость оптимизировать ваш код, надеюсь, вы не возражаете 😉

 $('#dropzone ul li').droppable({
    drop: function(event, ui) {
        var day = $(".confirmday").val(),
            drag, werkwoord;

        switch (ui.draggable[0].id) {
            case "drag1":
                drag = 'Medicijnen';
                werkwoord = ' ingenomen om ';
            break;

            case "drag2":
                drag = 'Snack';
                werkwoord = ' gegeten om ';
            break;

            case "drag3":
                drag = 'Frisdrank';
                werkwoord = ' gedronken om ';
            break;

            case "drag4":
                drag = 'Thee';
                werkwoord = ' gedronken om ';
            break;

            case "drag5":
                drag = 'Koffie';
                werkwoord = ' gedronken om ';
            break;

            case "drag6":
                drag = 'Alcohol';
                werkwoord = ' gedronken om ';
            break;

            default:
                return false;
            break;
        }

        $.post("ajax/save.php",
            { 
                drag: ui.draggable[0].id,
                drop: this.id,
                userid: <?php echo $_SESSION['id']; ?>,
                day: day
            },
            function(data){}
        );
    },
});