Clever Geek Handbook

JQuery UI Draggable / Sortable without holding down mouse button

I've searched for a solution all over the site but couldn't find anything. I am facing a problem where I need to redo the drag and drop style. I am using jquery ui for draggable / sortable part. However, I need to create a new behavior: that is, I press the handler, release the left butt, with mousemove, the element will stick to the cursor, with another click, the element will fall. In general, I need to disable the mousedown part while dragging.

EDIT:

So here's a simple example of sorting. I need that when clicking on the .article-header it will stick to the mouse without holding the mousedown holding. In other words, I would need a behavior where I can have the handle class active when clicking on it, but still active on the first mouse click, and then dragging it with the mouse without actually holding the mouse and clicking it again, it will crash.

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

+3


source to share


1 answer


I watched how the widget works $.ui.mouse

and I found out that the solution is essentially quite simple.

I extended the prototype mouseMove and mouseUp. Firstly, I don't need to check if the mouse has made some distance during mouseDown.

-, , mousemove 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);
}
0








More articles:


All Articles