3

ドラッグ アンド ドロップ機能を理解するために、最新バージョンの JQuery と JQuery UI を使用しています。私は小さな問題に直面しています - 主にマウスのドラッグが原因です。

ご覧のとおり、いくつかのアイテムを含むスタックを作成しています。

これらのスタックが本体のすぐ内側にある場合、つまり div.allstacks が本体にある場合、問題はありません。しかし、これらすべてのスタックを div#left-panel 内に配置するとすぐに、カーソルがフォーカスを失うという問題が発生します。

これは、水平スクロール後にアイテムをドラッグすると、マウスカーソルがドラッグ可能なノートの同じ位置にないことを意味します。

ここに問題があります：

問題のスクリーンショット

JSFiddle リンク [div#left-panel なしで作業]: http://jsfiddle.net/deveshz/YvmFf/

JSFiddle リンク [div#left-panel で動作しない] http://jsfiddle.net/deveshz/YvmFf/1/

これがコードです。

Javascript:

var zindex = 10; 
$(".item").draggable({
    containment: "body",
    scroll: true,
    revert: function (event, ui) {
        $(this).css("border", "none");
        return !event;
   },
    start: function (event, ui) {
        $(this).css("z-index", zindex++);
        $(this).css("border", "2px solid #333");
    }
});

 $(".stack_items").droppable({
    hoverClass: "over",
    drop: function (event, ui) {
        $("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
        $(ui.draggable).remove();
    }
});
4

1 に答える 1

4

@konrad から提供されたリンクを試して読んだところ、最新バージョンであっても Jquery UI のバグであることがわかりました。Jquery UI 1.9.2 バージョンを使い始めてすぐに問題が解決しました

更新されたフィドルは次のとおりです。http://jsfiddle.net/deveshz/YvmFf/2/

同じコードで:

var zindex = 10; 
$(".item").draggable({
    containment: "body",
    scroll: true,
    revert: function (event, ui) {
        $(this).css("border", "none");
        return !event;
   },
    start: function (event, ui) {
        $(this).css("z-index", zindex++);
        $(this).css("border", "2px solid #333");
    }
});

 $(".stack_items").droppable({
    hoverClass: "over",
    drop: function (event, ui) {
        $("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
        $(ui.draggable).remove();
    }
});

http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.jsの Jquery バージョン 1.9.2 を使用します。

于 2013-10-20T11:37:20.057 に答える