3

我在整个网站上寻找解决方案，但没有找到任何东西。我面临一个需要重做拖动样式的问题。我将 jquery ui 用于可拖动/可排序部分。但是，我需要创建一个新的行为：也就是说，我单击处理程序，释放左按钮，使用 mousemove，元素会粘在光标上，再单击一次，元素会下降。总的来说，我需要在拖动过程中禁用 mousedown 部分。

编辑：

对，所以这是一个简单的可排序示例。我需要的是，当我单击句柄 .article-header 时，它会粘在鼠标上而不按住 mousedown。所以换句话说，我需要一种行为，我可以在单击它时激活句柄类，但是在第一次 mouseup 时仍然处于活动状态，然后使用 mousemove 拖动它而不实际按住 mousedown 并且在其他单击时，它将下降。

$(".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 回答