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

Question

我在整个网站上寻找解决方案，但是没有找到任何东西。我面临一个问题，我需要重做拖拽的风格。我正在为可拖动/可排序部分使用jquery ui。但是，我需要创建一个新的行为：即，我单击处理程序，释放左按钮，使用mousemove，元素将粘在光标上，再次单击，元素将掉落。总的来说，我需要在拖动过程中禁用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/

Answer 1

我研究了一下$.ui.mouse小部件是如何工作的，我发现这个解决方案基本上很简单。

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

其次，我已经评论了这一部分，其中它们在调用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);
}