forgó div, kiugró alsó layerek

119

by sas_sam

HTML

<html>

<body>
    <div id="cont">
        <div id="div">
            <img src="http://i.imgur.com/kXGVn.png" id="kep" />
            <div id="h1" class="obj"></div>
            <div id="h2" class="obj"></div>
            <div id="h3" class="obj"></div>
            <div id="h4" class="obj"></div>
            <div id="h5" class="obj"></div>
            <div id="h6" class="obj"></div>
        </div>
    </div>
    <div id="info">
        Adatok:
        <table border="1">
            <thead>
                <tr>
                    <th>box</th>
                    <th>x1</th>
                    <th>y1</th>
                    <th>x2</th>
                    <th>y2</th>
                    <th>x</th>
                    <th>y</th>
                    <th>y (másik)</th>
                    <th>org_obj_left</th>
                    <th>org_obj_top</th>
                    <th>new_obj_left</th>
                    <th>new_obj_top</th>
                    <th>Irányvekt.</th>
                    <th>Irányvekt új</th>
                </tr>
            </thead>
            <tbody>
            <tbody>
    </div>
    
    <input type="text" id="deg" value="0" />
    <input type="button" id="rnd_rot" value="forgat" />
    <input type="button" id="clr_tbl" value="töröl" />
</body>
</html>

CSS

body {
    position: relative;
}
#cont{
    position: relative;
    top: 50px;
    left: 50px;
    border: 1px solid black;
    z-index: 0;
    width: 106px;
    height: 106px;
    margin-bottom: 100px;
}
#div {
    background-color: yellow;
    width: 106px;
    height:106px;
    z-index: 0;
}
#kep {
    position: absolute;
    z-index: 100;
    background: rgba(255,255,255,0.5);
}
.obj{
    cursor: pointer;
    position: absolute;
    z-index: 5;
    width: 20px;
    height: 20px;
}
#h1 {
    background-color: red;
    top: 15px;
    left: -5px;
}
#h2 {
    background-color: green;
    top: 15px;
    left: 90px;
}
#h3 {
    background-color: blue;
    top: 70px;
    left: -5px;
}
#h4 {
    background-color: brown;
    top: 70px;
    left: 90px;
}
#h5 {
    background-color: magenta;
    top: -5px;
    left: 45px;
}
#h6 {
    background-color: cyan;
    top: 90px;
    left: 45px;
}

#info {
    position: relative;
    clear: both;
}

JavaScript

$(function(){
    $.fn.data=function(pic, div) {
        var ret=new Object();
        var out="<tr>";
        
        var objPos=$(this).position();
        var objW=$(this).width()*1;
        var objH=$(this).height()*1;

        var offs=$("#"+div).position();
        
        var dimW=$("#"+pic).width()*1;
        var dimH=$("#"+pic).height()*1;
        
        var x1=offs.left*1+dimW/2;
        var y1=offs.top*1+dimH/2;
        var x2=offs.left*1+objPos.left*1+objW/2;
        var y2=offs.top*1+objPos.top*1+objH/2;
        
        var iranyvek=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
        var skalszorz=x1*x2+y1*y2;

        var x_offs=(x1<x2)?10:(x1>x2)?-10:0;
        
        var x=x2+x_offs;
        var y=(((y2-y1)*(x-x1))/(x2-x1))+y1;
        var y_masik=(x*(y2-y1)-x1*(y2-y1)+y1*(x2-x1))/(x2-x1);
        var kul=y2-y;
        var iranyvek_new=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));
        
        var new_obj_left=x-(offs.left*1)-(objW/2);
        var new_obj_top=y-(offs.top*1)-(objH/2);
        
        out=out+"<td>"+$(this).attr("id")+"</td>";
        out=out+"<td>"+Math.round(x1)+"</td>";
        out=out+"<td>"+Math.round(y1)+"</td>";
        out=out+"<td>"+Math.round(x2)+"</td>";
        out=out+"<td>"+Math.round(y2)+"</td>";
        out=out+"<td>"+Math.round(x)+"</td>";
        out=out+"<td>"+Math.round(y)+"</td>";
        out=out+"<td>"+Math.round(y_masik)+"</td>";
        out=out+"<td>"+Math.round(objPos.left)+"</td>";
        out=out+"<td>"+Math.round(objPos.top)+"</td>";
        out=out+"<td>"+Math.round(new_obj_left)+"</td>";
        out=out+"<td>"+Math.round(new_obj_top)+"</td>";
        out=out+"<td>"+Math.round(iranyvek)+"</td>";
        out=out+"<td>"+Math.round(iranyvek_new)+"</td>";

        
        ret.x=x;
        ret.y=y;
        ret.new_obj_left=new_obj_left
        ret.new_obj_top=new_obj_top;
        ret.org_obj_left=objPos.left;
        ret.org_obj_top=objPos.top;
        //ret.rev_obj_left=rev_obj_left
       ...