2

ドラッグアンドドロップにjQuery UIを使用していますが、すべてがうまく機能しています。唯一の問題は、スクロール中に要素をドラッグしてスクロール領域にドロップしようとすると、要素が元に戻ることです元の位置に。

明確にするために、デフォルトでは、左セクションからドラッグしてもすぐにはスクロールしません。一度ドロップした後でのみ、要素を選択して左または下にスクロールできます。

私の問題を示す例をjsfiddleに投稿しました。

$("#sidebar section span").draggable({
    cursor: "move",

    helper: "clone",

    revert: "invalid",

    //containment: "html",

    scroll: true
});

$("#main section").droppable({
    tolerance: 'fit',

    accept: "#sidebar section span",

    drop: function(e, ui)
    {
        console.log("Drop");

        var $draggedElement = ui.draggable;
        var $droppedArea = $(this);

        var droppedAreaLeft = $droppedArea.offset().left;
        var droppedAreaTop = $droppedArea.offset().top;

        $droppedArea.parent().css("overflow", "auto");

        var $draggableElement = $draggedElement.clone();

        $draggableElement.draggable({
            containment: [droppedAreaLeft, droppedAreaTop],

            scroll: true,

            scrollSpeed: 10,

            scrollSensitivity: 10
        });

        $droppedArea.append($draggableElement);

        $draggableElement.offset(ui.offset);
    },
});
4

1 に答える 1