Question

I really have problems with the jQuery drag and drop. So let me explain the situation a bit.

What I want to achieve is the following: when you drag one of the teardrops on the timeline, the id from the div and the id from the item it’s dropped on, should be stored in my db immediately after the drop.

I managed to do that with ajax, here’s the code:

$('#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;
    },
});

But when I do that, the dragged item (or the clone of that item) just disappears. I don’t know why, because the page doesn’t refresh. The new item just won’t store.

The other option I tried was to put the dragged item’s ID and the dropped on item ID in a text box and to save that every time something is dropped. But that won’t work as well.

I really hope someone can help me!
Thanks in advance.

Answer 1

You are returning false at the end of the drop callback handler.

This will tell the droppable that the draggable was invalid and will then discard it. If you remove return altogether it should work.

I took the liberty to optimize your code, I hope you don’t mind 😉

$('#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){}
        );
    },
});