4

ページ上にjQueryUIのドラッグ可能なオブジェクトと並べ替え可能なオブジェクトがあります。

ドラッグ可能な要素から並べ替え可能な要素に要素をドラッグすると、ドラッグされた要素がページの左上にジャンプします。

デモは次のとおりです：http：//jsfiddle.net/travisrussi/aBhDu/1/

再現するには：

  • 「アイテム5」をドラッグ可能なdiv（上のボックス）からソート可能なdiv（下のボックス）にドラッグします。

実結果：

ドラッグされた要素が相対位置から絶対位置に切り替わるように見えます。ドラッグされた「li」は次の場所から切り替わります。

<li class="ui-state-default ui-draggable" style="position: relative; left: 52px; top: 9px;">Item 3</li>

これに：

<li class="ui-state-default ui-draggable ui-sortable-helper" style="position: absolute; left: 67px; top: 91px; width: 80px; height: 20px;">Item 3</li>

ドラッグ可能なアイテムがソート可能なオブジェクトにドラッグされたとき。

これは、jQueryUI 1.8.12の関連するスニペットです（3041行目から始まります）。

//The element's absolute position on the page minus margins
this.offset = this.currentItem.offset();
this.offset = {
    top: this.offset.top - this.margins.top,
    left: this.offset.left - this.margins.left
};

// Only after we got the offset, we can change the helper's position to absolute
// TODO: Still need to figure out a way to make relative sorting possible
this.helper.css("position", "absolute");
this.cssPosition = this.helper.css("position");

$.extend(this.offset, {
    click: { //Where the click happened, relative to the element
        left: event.pageX - this.offset.left,
        top: event.pageY - this.offset.top
    },
    parent: this._getParentOffset(),
    relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
});

//Generate the original position
this.originalPosition = this._generatePosition(event);
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;

使用していない構成オプションはありますか？

CSSに問題はありますか？

それとも、これはjqueryUIのバグですか？

4

2 に答える 2

4

ジャンプの主な原因は、ドラッグ可能オブジェクトの「ヘルパー」オプションが「クローン」に設定されていなかったことです。クローン ヘルパーを使用すると、ジャンプの問題はなくなります。

「元の」ヘルパー設定を使用する必要がある場合でも、ジャンピングの問題が発生します。ここで強調表示されているように、カスタム ヘルパー オプションを使用することが考えられる解決策の 1 つです: jQueryUI Draggable Helper Option Help。アイデアは、ヘルパーの作成時に相対位置から絶対位置に変換することです。

「クローン」ヘルパーを使用した動作デモへのリンクは次のとおりです: http://jsfiddle.net/travisrussi/aBhDu/

于 2011-05-05T03:41:49.500 に答える
3

カスタムヘルパー関数は、次のようにこの問題を解決するようです。

        $( ".draggable" ).draggable({
            connectToSortable: "#sortable",
            //helper: "original",
            revert: "invalid",
            helper: function() {
                return $(this);
            }
        });
于 2012-02-22T05:24:59.980 に答える