Question

我在整个网站上搜索解决方案，但没有找到任何内容。我正面临一个问题，我需要重做拖动的风格。我使用jquery ui作为可拖动/可排序的部分。但是，我需要创建一个新的行为：也就是说，我单击处理程序，释放左边的buttom，使用mousemove，元素将粘在光标上，再次单击，元素将会丢失。总的来说，我需要在拖动过程中禁用mousedown部分。

修改

是的，所以这是一个简单的可排序示例。我需要的是，当我点击手柄.article-header时，它会坚持鼠标而不持有mousedown。所以换句话说，我需要一种行为，我可以在单击它时使句柄类处于活动状态，但是在第一次鼠标上仍然处于活动状态，然后使用mousemove拖动它而不实际持有mousedown，而在其他单击时，它将会掉落。 / p>

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

Answer 1

我正在研究$.ui.mouse窗口小部件的工作原理，我发现解决方案基本上非常简单。

我已经扩展了mouseMove和mouseUp的原型。首先，我不需要检查鼠标在鼠标下是否有任何距离。

其次，我已经评论了这个部分，在调用mouseup事件之后，他们将鼠标移除。因此，您只需要取消绑定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);
}

Jquery UI可拖动/可排序而无需按住鼠标按钮

1 个答案: