鼠标按下时是否可以更改可拖动元素的 z-Index？

Question

我发现JQuery UI Draggable的stack选项非常有用，但它只有在拖动元素时才起作用。那么，我可以更改stack值< /code> 当我**单击元素** 或使用 mousedown 事件 时可拖动的元素？

非常感谢~~!!

可拖动插件更改可拖动元素堆栈[z-index]顺序的方式是拖动和移动元素。如果您只单击可拖动元素，它不会更改堆栈顺序。而且我希望它在我时改变单击。

Answer 1

这不适合你吗？

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

Answer 2

注意请参阅我对您的问题的评论，我认为我两次在下面写下我都误解了它。

---

如果您希望确保拖动过程中拖动的项目始终高于其他所有项目，则可以在与您的可拖动对象匹配的选择器中设置 z-index 代码>ui-draggable-dragging。 jQuery UI 将该类添加到拖动操作期间被拖动的元素中。

例如，假设您正在拖动名为 foo 的 div 内的跨度。 CSS 将为：

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

Live example

由于该类仅在拖动期间添加，因此 z -index值仅在拖动过程中生效。请参阅文档中的“概述”。

编辑： ...通过使用 zIndex 选项 (实例）。

Answer 3

您可以将以下代码放在可拖动插件（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);

或者，您可能想要将其制作为到一个单独的选项中，如下所示（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);

Answer 4

由于我在搜索时发现了这个问题，所以我想我会发布我找到的答案。单击不会更改 z-index 的原因是拖动尚未开始。要强制在所有单击时启动拖动，请将距离选项设置为 0：

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

该行为与默认行为几乎相同，只是现在即使没有鼠标移动，z 顺序也会发生变化。