在可拖动元素上设置z-index

问题描述:

我试图使用jQuery在可拖动元素上设置z-index。你可以看到我在说什么以及到目前为止的情况:

I am trying to set the z-index on draggable elements using jQuery. You can see what I am talking about and what I have so far here:

http://jsfiddle.net/sushik/LQ4JT/1/

这是非常原始的,有它的问题。任何想法如何使最后点击的元素具有最高的z-index,而不是重置所有其余的基础 z-index ,让他们的步骤,所以第二个到最后一个点击具有第二高的 z-index 等。

It is very primitive and there are problems with it. Any ideas on how I would make the last clicked element have the highest z-index and rather than resetting all of the rest to a base z-index, have them step, so the 2nd to last clicked has the second highest z-index, etc..

它只适用于完全点击事件,但可拖动功能通过单击并按住。如何在初始点击下应用该类,而不是等待释放点击的事件?

Another problem I am having with it is that it only works on a full click event but the draggable functionality works by clicking and holding down. How could I have the class applied on that initial click down and not wait for the event of releasing the click?

我更新了您的CSS和Javascript。除非你非常绝望,否则不要在css中使用!important。

I have updated your CSS and Javascript. Don't use "!important" in css unless you are that much desperate.

http://jsfiddle.net/LQ4JT/7/

    $(document).ready(function() {
        var a = 3;
        $('#box1,#box2,#box3,#box4').draggable({
            start: function(event, ui) { $(this).css("z-index", a++); }
        });
    $('#dragZone div').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

});

虽然这个答案是有效的,但它在javascript中的最大数目为2 ^ 31-1的限制。
引用什么是JavaScript的Max Int?一个数字可以在不损失精度的前提下获得最高的整数值?了解更多信息。

Though this answer works it has the limitation of max number of 2^31−1 in javascript. refer What is JavaScript's Max Int? What's the highest Integer value a Number can go to without losing precision? for more info.