天天看點

html z-index置頂,從七巧闆看SVG 層次 置頂問題 (z-index無效解決方案)

svg與H5标準不完全相容,許多css屬性并不适用與svg,包括 z-index;

svg中的元素隻會按照生成順序層疊。是以,修改svg中元素層疊關系隻能重寫svg的innerHTML了。

思路

目标:将選中的元素置頂。

實作:先移除此節點,再重新添加此節點。

$("#p").append($(this).detach());

detach() 方法移除被選元素,包括所有文本和子節點。這個方法會保留 jQuery 對象中的比對的元素,因而可以在将來再使用這些比對的元素。detach() 會保留所有綁定的事件、附加的資料,這一點與 remove() 不同。

【具體執行個體:svg七巧闆】

Tangram

body {

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

-khtml-user-select: none;

user-select: none;

}

.tangram{

stroke:#000000;

stroke-width:1;

transform-origin:50% 50%;

}

順時針1°

順時針10°

逆時針10°

逆時針1°

請在移動裝置上玩耍,單指移動,長按0.5s呼出旋轉菜單,不允許放大。

var fx=new Object();

var fy=new Object();

var nx=new Object();

var ny=new Object();

var tx=new Object();

var ty=new Object();

var r=new Object();

var curObj=null;

var timeOutEvent=0;

for (var i=1;i<=7;i++){

tx[i]=0;

ty[i]=0;

r[i]=0;

}

$(".tangram").on("touchstart",function (e) {

e.preventDefault();

$("#p").append($(this).detach());

var index=$(this).attr("index");

fx[index] = e.targetTouches[0].pageX;

fy[index] = e.targetTouches[0].pageY;

$(this).css("border", " solid 2px lightgreen");

curObj = this;

timeOutEvent = setTimeout("longPress()",500);

}).on("touchmove",function (e) {

e.preventDefault();

var index=$(this).attr("index");

nx[index] = e.targetTouches[0].pageX;

ny[index] = e.targetTouches[0].pageY;

tx[index] += nx[index] - fx[index];

ty[index] += ny[index]-fy[index];

$(this).css("transform","translateX("+tx[index]+"px) translateY("+ty[index]+"px) rotate("+r[index]+"deg)");

fx[index] = nx[index];

fy[index] = ny[index];

clearTimeout(timeOutEvent);

timeOutEvent = 0;

}).on("touchend", function (e) {

clearTimeout(timeOutEvent);

});

function longPress(){

timeOutEvent = 0;

index=$(curObj).attr("index");

$("#rotate").css("left",fx[index]).css("top",fy[index]);

$("#rotate").show();

}

function rotateObj(dir) {

index=$(curObj).attr("index");

r[index]+=dir;

$(curObj).css("transform","translateX("+tx[index]+"px) translateY("+ty[index]+"px) rotate("+r[index]+"deg)");

}

$("#p").on("touchstart",function () {

$("#rotate").hide();

})

$("body").on("dblclick",function(e){

e.preventDefault();

})