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

Posted 2023-05-08

【中文标题】鼠标按下时是不是可以更改可拖动元素的 z-Index？

【英文标题】：Is it possible to change z-Index of the draggable elements when mousedown?鼠标按下时是否可以更改可拖动元素的 z-Index？

【发布时间】：2011-05-24 06:07:51

【问题描述】：

我发现JQuery UI draggable 的stack option 非常有用，但它只在我拖动元素时才有效。所以，我可以更改**click the elements** 或stack value >with the mousedown event ??

非常感谢~~！！

可拖动插件改变可拖动元素堆栈[z-index]顺序的方式是拖动和移动元素。如果你只点击可拖动元素它不会改变堆栈顺序。我想要它当我点击时改变。

【问题讨论】：

我没听懂你的意思，你说堆栈值是什么意思？

你的意思是z-index值？

我想我误解了你的问题。你的意思是，你根本不想拖动它们，你只想点击它们来改变它们的堆叠顺序。如果是这样，那就无视我的回答，没用。

T.J.Crowder。你的意思是拖动和移动是改变可拖动元素的堆叠顺序的唯一方法？？

【参考方案1】：

这不适合你吗？

$(元素).mousedown(函数() ... )

【讨论】：

如果我对问题的（修改后的）理解（见我的评论）是正确的，那么问题是在函数中放入什么......

我只是想在点击元素时改变它们的堆叠顺序

【参考方案2】：

注意请参阅我对您问题的评论，我认为我在写以下内容时都误解了它。

---

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

例如，假设您正在拖动位于名为 foo 的 div 内的 span。 CSS 将是：

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

Live example

由于类只在拖动过程中添加，z-index 值只会在拖动过程中生效。请参阅the docs 中的“概述”。

编辑：...通过使用the zIndex option (live example)。

【参考方案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);

【讨论】：

与其多次发布完全相同的答案，不如将问题标记为与您回复的另一个问题（如果它们确实相同）重复。

在发布多个问题的复制和粘贴样板/逐字答案时要小心，这些往往会被社区标记为“垃圾邮件”。

【参考方案4】：

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

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

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