Droppable on drop, element gets appended twice

Question

I'm almost having a breakdown because of this drag and drop. I simply want to alert a message when the drop has been triggered.

This is my code, and I can't figure why the alert is sended twice! Please help me, or I'll be in the hospital soon :p

The jQuery:

$(document).ready(function() {

    init();

    function init () {

        sorting();
        dragging();
        dropping();
    }

    function resize (event, ui) {
        ui.helper.find("img#day_image").css({ height: img_height, width: img_width });
        ui.helper.css({ height: img_height, width: img_width });
    }

    function sorting () {
        $("#dropbar").sortable({
            connectWith: ".deal-itinerary-list",
            revert: true,
            dropOnEmpty: false
            /*
            stop: function (event, ui) {

                $("li.placeholder").each(function(i) {

                    $(this).find("span.day-nr").text('Day ' + ++i);

                });

            }
            */
        });
    }

    function dragging () {
        $(".deal-itinerary-list li").draggable({
            connectToSortable: "#dropbar",
            helper: function (event) {
                var image = $(this).find("img#day_image").clone();
                return image;
            },
            revert: false,
            opacity: 0.5,
            cursorAt: { top: 50, left: 50},
            start: function (event, ui) {
                $(ui.helper.find(".day-content")).hide();
            },
            drag: resize
        });
    }

    function dropping() {

        $("#dropbar").droppable({
            tolerance: "pointer",
            accept: "img#day_image",
            drop: function (ui) {

                alert("hello");

            }
        });

    }

    $( "ul, li" ).disableSelection();

});

Answer 1

Apperantly this was a known issue, if both sortable and droppable are used on the same element.

This questions solved my problem.