jquery-sortableで大きなアイテムを一番上/下にドラッグすることはできません

psycat

大きなアイテムを最上部または最下部の位置にドラッグする際に問題が発生します。

デモ:http//jsfiddle.net/vladimir_ze/b2Q9b/17/

並べ替えの前に(startイベントで)大きな要素を簡単に並べ替えるために要素のサイズを小さくしましたが、(小さいサイズに設定する前に)要素の元の高さで計算が行われているようです。

それを解決する方法はありますか?

更新しました

イベントの前に要素の高さを変更できるかどうかを検索しているときに、最近興味深いリンク(jQuery UI:ドラッグ可能を開始する前)にstart出くわしました。beforeStartイベントを使用してソート可能を拡張できることがわかりました。

var oldMouseStart = $.ui.sortable.prototype._mouseStart;
$.ui.sortable.prototype._mouseStart = function (event, overrideHandle, noActivation) {
    this._trigger('beforeStart', event, this._uiHash());
    oldMouseStart.apply(this, [event, overrideHandle, noActivation]);
};

ときbeforeStart火災は私はアイテムを最小限にするためにクラスを適用してもに電話をかけます.sortable('refresh')

結果は次のとおりです。http//jsfiddle.net/vladimir_ze/b2Q9b/18/まだ少しバグがありますが、上端からドラッグを開始するとうまく機能します。

ジョン

これは、すでにログに記録されているjqueryのバグのようです。

これに対する修正は、バージョン1.12で利用可能になります。で提案されているようその一方で、あなたのスクリプトに以下のコードを追加することができ、このlink.Workingのフィドル

$.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, {
_mouseDrag: function(event) {
    var i, item, itemElement, intersection,
        o = this.options,
        scrolled = false,
        touchingEdge;

    //Compute the helpers position
    this.position = this._generatePosition(event);
    this.positionAbs = this._convertPositionTo("absolute");

    if (!this.lastPositionAbs) {
        this.lastPositionAbs = this.positionAbs;
    }

    //Do scrolling
    if(this.options.scroll) {
        if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {

            if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
                this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
            } else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
                this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
            }

            if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {
                this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
            } else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
                this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
            }

        } else {

            if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {
                scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
            } else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {
                scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
            }

            if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {
                scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
            } else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {
                scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
            }

        }

        if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {
            $.ui.ddmanager.prepareOffsets(this, event);
        }
    }

    //Regenerate the absolute position used for position checks
    this.positionAbs = this._convertPositionTo("absolute");

    //Set the helper position
    if(!this.options.axis || this.options.axis !== "y") {
        this.helper[0].style.left = this.position.left+"px";
    }
    if(!this.options.axis || this.options.axis !== "x") {
        this.helper[0].style.top = this.position.top+"px";
    }

    // Check if the helper is touching the edges of the containment.
    if(this.containment) {
        if((this.positionAbs.left === this.containment[0] || this.options.axis === "y") &&
                (this.positionAbs.top === this.containment[1] || this.options.axis === "x")) {
            touchingEdge = 0;
            this.direction = "down";
        }
        else if((this.positionAbs.left === this.containment[2] || this.options.axis === "y") &&
                (this.positionAbs.top === this.containment[3] || this.options.axis === "x")) {
            touchingEdge = this.items.length - 1;
            this.direction = "up";
        }
    }

    if(touchingEdge !== undefined && this.helper[0] !== this.items[touchingEdge].item[0]) {
        // Rearrange, if the helper is touching the edge of the containment and not
        // already the item at the edge.
        this._rearrange(event, this.items[touchingEdge], false);
        this._trigger("change", event, this._uiHash());
    } else {
        //Rearrange
        for (i = this.items.length - 1; i >= 0; i--) {

            //Cache variables and intersection, continue if no intersection
            item = this.items[i];
            itemElement = item.item[0];
            intersection = this._intersectsWithPointer(item);
            if (!intersection) {
                continue;
            }

            // Only put the placeholder inside the current Container, skip all
            // items from other containers. This works because when moving
            // an item from one container to another the
            // currentContainer is switched before the placeholder is moved.
            //
            // Without this, moving items in "sub-sortables" can cause
            // the placeholder to jitter beetween the outer and inner container.
            if (item.instance !== this.currentContainer) {
                continue;
            }

            // cannot intersect with itself
            // no useless actions that have been done before
            // no action if the item moved is the parent of the item checked
            if (itemElement !== this.currentItem[0] &&
                this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement &&
                !$.contains(this.placeholder[0], itemElement) &&
                (this.options.type === "semi-dynamic" ? !$.contains(this.element[0], itemElement) : true)
            ) {
                this.direction = intersection === 1 ? "down" : "up";

                if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) {
                    this._rearrange(event, item);
                } else {
                    break;
                }

                this._trigger("change", event, this._uiHash());
                break;
            }
        }
    }

    //Post events to containers
    this._contactContainers(event);

    //Interconnect with droppables
    if($.ui.ddmanager) {
        $.ui.ddmanager.drag(this, event);
    }

    //Call callbacks
    this._trigger("sort", event, this._uiHash());

    this.lastPositionAbs = this.positionAbs;
    return false;

}
}));

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

jQuery Sortable:要素がドラッグで一番上に移動します

分類Dev

jQuery Sortable-ドラッグアウトした場合、アイテムをリストの一番上に移動します。

分類Dev

ドラッグアンドドロップ要素jqueryでクリックイベントを発生させることはできません

分類Dev

jQueryの並べ替え可能なリストですが、要素を別のリストにドラッグすることはできません

分類Dev

jQueryドロップダウンを下にスライドさせ続けることはできません

分類Dev

「overflow-y:auto」の要素を作成しながら、jquery ui sortableを使用してアイテムを水平方向にドラッグしたときに、ブラウザーがスクロールできるようにするにはどうすればよいですか?

分類Dev

JQuery-UIのドラッグ可能なアイテムはドラッグできなくなります

分類Dev

jquery uiダイアログ:初期化前にダイアログのメソッドを呼び出すことはできません

分類Dev

jQuery変数でメソッドを使用することはできません

分類Dev

JQuery-mobile。プログラムでダイアログを開くことはできません。私が考えることができるすべてを試しました

分類Dev

アコーディオンjQueryは、並んでいるときに2番目のアイテムを押し下げます

分類Dev

jQuery UI-エラー:初期化の前にダイアログでメソッドを呼び出すことはできません。メソッド「open」を呼び出そうとしました

分類Dev

jqueryでテキストボックスを無効にすることはできません

分類Dev

jQueryダイアログエラー:「初期化前にダイアログでメソッドを呼び出すことができません。メソッド 'close'を呼び出そうとしました」

分類Dev

jQuery関数を変数に割り当てることはできませんが、ラップすることはできます

分類Dev

jQuery Sortableは、ユーザーが子アイテムを親アイテムに移動できないようにします

分類Dev

Jqueryはアンカータグを見ることができません

分類Dev

jqueryフォーム検証プラグインの使用中に未定義のプロパティ 'call'を読み取ることができません

分類Dev

jQueryを使用して、特定のクラスを持つ順序付きリストアイテムをリストの一番上に移動する方法

分類Dev

jQuery:子要素に条件付きでクラスを追加することはできません

分類Dev

jqueryとウェイポイントでクラスを変更することはできません

分類Dev

Contact Formプラグイン(Wordpress)でjQueryを使用して送信ボタンを無効にすることはできません

分類Dev

JQueryを使用してIdタグを追加することはできません

分類Dev

jqueryの並べ替え可能なUIは、特定のdivにドラッグされたときにアイテムを削除します

分類Dev

Jquery.empty()はドロップダウンリストでアイテムを選択することを許可していません

分類Dev

jQueryを使用してLIをULに追加することはできません

分類Dev

jQueryのfadeInとfadeOutはimgを一番上に持ってきます

分類Dev

vue2 Webサイトの次のチュートリアルでは、サードパーティのjqueryプラグインselect2を機能させることができません

分類Dev

jQueryの要素をターゲットにすることができません

Related 関連記事

  1. 1

    jQuery Sortable:要素がドラッグで一番上に移動します

  2. 2

    jQuery Sortable-ドラッグアウトした場合、アイテムをリストの一番上に移動します。

  3. 3

    ドラッグアンドドロップ要素jqueryでクリックイベントを発生させることはできません

  4. 4

    jQueryの並べ替え可能なリストですが、要素を別のリストにドラッグすることはできません

  5. 5

    jQueryドロップダウンを下にスライドさせ続けることはできません

  6. 6

    「overflow-y:auto」の要素を作成しながら、jquery ui sortableを使用してアイテムを水平方向にドラッグしたときに、ブラウザーがスクロールできるようにするにはどうすればよいですか?

  7. 7

    JQuery-UIのドラッグ可能なアイテムはドラッグできなくなります

  8. 8

    jquery uiダイアログ:初期化前にダイアログのメソッドを呼び出すことはできません

  9. 9

    jQuery変数でメソッドを使用することはできません

  10. 10

    JQuery-mobile。プログラムでダイアログを開くことはできません。私が考えることができるすべてを試しました

  11. 11

    アコーディオンjQueryは、並んでいるときに2番目のアイテムを押し下げます

  12. 12

    jQuery UI-エラー:初期化の前にダイアログでメソッドを呼び出すことはできません。メソッド「open」を呼び出そうとしました

  13. 13

    jqueryでテキストボックスを無効にすることはできません

  14. 14

    jQueryダイアログエラー:「初期化前にダイアログでメソッドを呼び出すことができません。メソッド 'close'を呼び出そうとしました」

  15. 15

    jQuery関数を変数に割り当てることはできませんが、ラップすることはできます

  16. 16

    jQuery Sortableは、ユーザーが子アイテムを親アイテムに移動できないようにします

  17. 17

    Jqueryはアンカータグを見ることができません

  18. 18

    jqueryフォーム検証プラグインの使用中に未定義のプロパティ 'call'を読み取ることができません

  19. 19

    jQueryを使用して、特定のクラスを持つ順序付きリストアイテムをリストの一番上に移動する方法

  20. 20

    jQuery:子要素に条件付きでクラスを追加することはできません

  21. 21

    jqueryとウェイポイントでクラスを変更することはできません

  22. 22

    Contact Formプラグイン(Wordpress)でjQueryを使用して送信ボタンを無効にすることはできません

  23. 23

    JQueryを使用してIdタグを追加することはできません

  24. 24

    jqueryの並べ替え可能なUIは、特定のdivにドラッグされたときにアイテムを削除します

  25. 25

    Jquery.empty()はドロップダウンリストでアイテムを選択することを許可していません

  26. 26

    jQueryを使用してLIをULに追加することはできません

  27. 27

    jQueryのfadeInとfadeOutはimgを一番上に持ってきます

  28. 28

    vue2 Webサイトの次のチュートリアルでは、サードパーティのjqueryプラグインselect2を機能させることができません

  29. 29

    jQueryの要素をターゲットにすることができません

ホットタグ

アーカイブ