Is it possible to change z-Index of the draggable elements when mousedown?

I found that the stack option of JQuery UI draggable was very useful , but it only work when I dragging the elements .So, can I change the stack value of elements which draggable just when I **click the elements** or with the mousedown event ??

Thank you开发者_JS百科 very much~~!!

The way the draggable plugin to change draggable elements stack[z-index] order is dragging and moving the element.If you only click the draggable element it doesn't change the stack order.And I want it to change when I click.

Is this not working for you?

$(element).mousedown(function(){
    ...
})

Note See my comment on your question, I think both times I was writing the below I misunderstood it.

If you're looking to ensure that the item you're dragging is always above everything else during the drag, you can set the z-index in a selector matching your draggable with the class ui-draggable-dragging. jQuery UI adds that class to the element being dragged during the drag operation.

#foo span.ui-draggable-dragging {
    z-index: 1000 !important;   /* Sadly, you may need the !important */
}

Since the class is only added during the drag, that z-index value will only take effect during the drag. See the "overview" in the docs.

Edit: ...by using the zIndex option (live example).

You might place the following code after the draggable plugin (jsfiddle):

(function ($) {
    var _create =  $.ui.draggable.prototype._create;

    $.ui.draggable.prototype._create = function () {
        var self = this;

        self.element.mousedown(function (e) {
            self._mouseStart(e);
            self._trigger('start', e);
            self._clear();
        });

        _create.call(self);
    };
})(jQuery);

Or, you might want to make it into a separate option as follows (jsfiddle):

(function ($) {
    $.ui.plugin.add('draggable', 'increaseZindexOnmousedown', {
        create: function () {
            this.mousedown(function (e) {
                var inst = $(this).data('draggable');
                inst._mouseStart(e);
                inst._trigger('start', e);
                inst._clear();
            });
        }
    });
})(jQuery);

Since I found this question when I was searching, I figured I would post the answer I found. The reason a click does not change the z-index is that the drag hasn't initiated yet. To force the drag to be initiated on all clicks, set the distance option to 0:

http://docs.jquery.com/UI/Draggable#option-distance

The behavior is nearly the same as the default, except now z-order changes even with no mouse motion.