3

サイト全体で解決策を探していましたが、何も見つかりませんでした。ドラッグのスタイルをやり直す必要があるという問題に直面しています。ドラッグ可能/ソート可能部分にjqueryuiを使用しています。ただし、新しい動作を作成する必要があります。つまり、ハンドラーをクリックし、左ボタンを放します。mousemoveを使用すると、要素がカーソルに固定され、もう一度クリックすると、要素がドロップします。全体として、ドラッグ中はマウスダウン部分を無効にする必要があります。

編集：

そうです、これが簡単なソート可能な例です。必要なのは、ハンドル.article-headerをクリックすると、マウスを押したままにせずにマウスに固定されることです。つまり、ハンドルクラスをクリックしたときにアクティブにできる動作が必要ですが、最初のマウスアップではアクティブのままで、実際にマウスを押したままにせずにmousemoveでドラッグすると、ドロップします。

$(".articles:not(.nosort)").sortable({
    handle : '.article-header',
    placeholder: "ui-state-highlight",
    update : function (ev,that) {
    var
        order = $(ev.target).sortable('serialize');
        //Saving the order to db
    }
});


<ul class="articles" data-handler="articles">

        <li id="article-list_1">
            <div class="article-header">
                <h4>Lorem Ipsum 1</h4>
            </div>
        </li>
    <li id="article-list_2">
            <div class="article-header">
                <h4>Lorem Ipsum 2</h4>
            </div>
        </li>
    <li id="article-list_3">
            <div class="article-header">
                <h4>Lorem Ipsum 3</h4>
            </div>
        </li>
    <li id="article-list_4">
            <div class="article-header">
                <h4>Lorem Ipsum 4</h4>
            </div>
        </li>
    <li id="article-list_5">
            <div class="article-header">
                <h4>Lorem Ipsum 5</h4>
            </div>
        </li>

</ul>

http://jsfiddle.net/s2x2n/

4

1 に答える 1

0

$.ui.mouseウィジェットがどのように機能するかを調べていたところ、解決策は本質的に非常に簡単であることがわかりました。

mouseMove と mouseUp のプロトタイプを拡張しました。まず、mouseDown 中にマウスが距離を置いたかどうかを確認する必要はありません。

次に、mouseup イベントが呼び出された後に mousemove のバインドを解除している部分にコメントしました。したがって、たとえば並べ替え可能なウィジェットの更新イベントで、mousemove イベントのバインドを解除するだけで済みます。

これが正しいアプローチであるかどうかはわかりませんが、誰かがより良い提案をしている場合は、喜んでその回答を承認します.

$.ui.mouse.prototype._mouseMove = function(event) {
        // IE mouseup check - mouseup happened when mouse was out of window
        if ($.ui.ie && !(document.documentMode >= 9) && !event.button) {
            return this._mouseUp(event);
        }

        if (this._mouseStarted) {
            this._mouseDrag(event);
            return event.preventDefault();
        }

        // if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
            this._mouseStarted =
                (this._mouseStart(this._mouseDownEvent, event) !== false);
            (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
        // }
        return !this._mouseStarted;
    }
 $.ui.mouse.prototype._mouseUp = function(event) {
        $(document)
            // .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
            .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);

        if (this._mouseStarted) {
            this._mouseStarted = false;

            if (event.target === this._mouseDownEvent.target) {
                $.data(event.target, this.widgetName + '.preventClickEvent', true);
            }

            this._mouseStop(event);
        }

        return false;
    }

ソート可能な更新機能

update : function (ev,that) {
    $(document).unbind('mousemove.'+$.ui.sortable.prototype.widgetName, $.ui.mouse.prototype._mouseMoveDelegate);
}
于 2014-11-08T11:41:06.597 に答える