使用droppable进行可拖动排序

Question

我做了一个拖累＆amp;下降系统。可拖动的项目可以放在占位符中。这些占位符是根据可拖动项目的数量动态添加的。

但是当我在这些占位符之间拖动一个可拖动的项目时，它不会被附加到它上面。我尝试过很多东西，但我仍然坚持下去。

我担心我需要更改很多代码，但也许你们其中一个人对如何解决这个问题有天才的想法。

Here's the jsfiddle

是否可以检查它是否已放置在占位符上？

这是我的可放置功能：

function dropping () {
    $("li.placeholder").droppable({
        accept: ".to-drag",
        hoverClass: correct_placeholder,
        activeClass: active_placeholder,
        revert: false,
        tolerance: "pointer",
        drop: function (event, ui) {
            var dragging = ui.draggable.clone().find("img").remove();
            $(this).append(dragging).addClass("dropped");
            $(this).droppable('disable');

            var day = $(ui.draggable).attr('data-id');
            var index = $(event.target).index();

            $(this).attr("data-id", day);
            $(this).attr("date-order", index);
            $(this).addClass("drop-"+ index);
            $(this).attr("data-content", "");

            $(this).find("h1, p").remove();

            var dropped = $(".dropped").length;
            var original = $(".placeholder").length;

            if (dropped === original) {
                $("li.placeholder").removeClass(blank_placeholder);
                $("#dropzone").append('<li class="placeholder ' + blank_placeholder +' " data-id="" data-order=""></li>');
                init();
            }

            $(".remove").click(function() {
                var removable = $(this).parent();
                var modal = $(this).attr("data-modal");
                $(".modal-"+modal).remove();
                if (dropped > original) {
                    $(this).parent().droppable('enable')

                    removable.remove();
                    removable.removeClass("dropped");
                    removable.removeClass("ui-droppable-disabled");
                } else {
                    $(this).parent().droppable('enable');

                    removable.empty();
                    removable.removeClass("dropped");
                    removable.removeClass("ui-droppable-disabled");
                }
                init();
            });
        }
    });

    $("li.dropped").droppable({
        disabled: function (event, ui) {
            disabled: true
        }
    });
}