在可拖动元素上设置 z-index [英] Setting z-index on draggable elements
问题描述
我正在尝试使用 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.
$(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 的最高整数值吗? 了解更多信息.
Though this answer works it has the limitation of max number of 2^31−1 in javascript. refer What is JavaScript's highest integer value that a Number can go to without losing precision? for more info.
这篇关于在可拖动元素上设置 z-index的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!