尝试使用jquery .offset（）在表中获取SVG对象的位置

时间：2015-11-09 07:54:45

标签： javascript jquery css jquery-ui

我在表格布局中有一个带有SVG对象的html文件。我已经使用jQuery UI＆＃39; .draggable()使这些SVG对象可拖动。我的目标是拖动这些元素并使用HTTP POST将其位置发送回服务器。要找到我正在使用的职位.offset()。当我在服务器中看到数据并使用该数据重建位置时，我发现两个对象#head2和#shirt2总是最终具有相同的值。

var sh2 = $("#shirt2").offset();
var he1 = $("#head1").offset();
var he2 = $("#head2").offset();
var sh1 = $("#shirt1").offset();
document.getElementById('sh2l').value = parseInt(sh2.left);
document.getElementById('sh2t').value = parseInt(sh2.top);
document.getElementById('he1l').value = parseInt(he1.left);
document.getElementById('he1t').value = parseInt(he1.top);
document.getElementById('he2l').value = parseInt(he2.left);
document.getElementById('he2t').value = parseInt(he2.top);
document.getElementById('sh1l').value = parseInt(sh1.left);
document.getElementById('sh1t').value = parseInt(sh1.top);
alert("\nhe1l" + he1.left + "\nhe1t" + he1.top + "\nhe1l" + "\nhe1l");
document.getElementById("temp").submit();

＆＃13;
＆＃13; 
.window {
position: relative;
left:880px;
border: 5px solid red;
    width: 350px;
    height:450px;
    margin-top:30px;
}
.top_bar {
    border: 3px dashed red;
    border-radius: 80px;
}
.menu
{
    position:relative;
    width:410px;
    height:420px;
    bottom:450px;
    left:80px;
    margin-right: 0px;
    border:2px solid black;
}
.bottom
{
position:relative;
    width:40px;
    height:20px;
    margin: 2px 2px 2px 2px;
    left:610px;
    bottom:600px;
    
}
#top
{
    text-align: center;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size:40px;
}
#head1
{
margin: 0px 0px 0px 0px;
width:200px;
height:200px;
}
#head2
{
margin: 0px 0px 0px 0px;
width:200px;
height:200px;
}
#shirt1
{
margin: 0px 0px 0px 0px;
width:200px;
height:200px;
}
#shirt2
{
margin: 0px 0px 0px 0px;
width:200px;
height:200px;
height:200px;
}
.comic_button
{
width:150px;
height:80px;
border: 4px dashed red;
text-align: center;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size:30px;
    border-radius: 10px;

}
input
{
margin:15px;
}
＆＃13; 
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stick.css">
       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(function() {
        $("#head1").draggable();
        $("#head2").draggable();
        $("#shirt1").draggable();
        $("#shirt2").draggable();
    });
   
    function clicker() {
        var sh2 = $("#shirt2").offset();
        var he1 = $("#head1").offset();
        var he2 = $("#head2").offset();
        var sh1 = $("#shirt1").offset();
        document.getElementById('sh2l').value = parseInt(sh2.left);
        document.getElementById('sh2t').value = parseInt(sh2.top);
        document.getElementById('he1l').value = parseInt(he1.left);
        document.getElementById('he1t').value = parseInt(he1.top);
        document.getElementById('he2l').value = parseInt(he2.left);
        document.getElementById('he2t').value = parseInt(he2.top);
        document.getElementById('sh1l').value = parseInt(sh1.left);
        document.getElementById('sh1t').value = parseInt(sh1.top);
        alert("\nhe1l" + he1.left + "\nhe1t" + he1.top + "\nhe1l" + "\nhe1l");
        document.getElementById("temp").submit();
    }
</script>
</head>
<body style="height:800px; width:1340px;">
    <div class="top_bar">
        <h1 id="top">STICK MAN</h1>
    </div>
    <div class="window">
        <svg width="350" height="450" xmlns="http://www.w3.org/2000/svg">
            <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
            <g>
                <title>Layer 1</title>
                <line id="svg_3" y2="215" x2="193" y1="138" x1="192" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                <line id="svg_4" y2="300" x2="170" y1="207" x1="193" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                <line id="svg_5" y2="306" x2="219" y1="214" x1="193" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                <line id="svg_6" y2="163" x2="132" y1="162" x1="193" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                <line id="svg_7" y2="162" x2="253" y1="161" x1="192" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
            </g>
        </svg>
    </div>
    <div class="menu">
        <table>
            <tr>
                <td>
                    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" id="head1">
                        <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
                        <g>
                            <title>Layer 1</title>
                            <ellipse ry="44" rx="44" id="svg_8" cy="129" cx="92" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                            <line id="svg_15" y2="97" x2="21" y1="98" x1="163" stroke-linecap="round" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                            <path d="m60,95c0,-1 0,-2 0,-3c0,-2 0,-3 0,-5c0,-3 0,-5 0,-6c0,-3 0,-4 0,-5c0,-1 0,-2 0,-3c0,-3 1,-4 1,-5c0,-1 0,-2 0,-4c0,-2 1,-3 1,-6c0,-1 0.4588,-1.69344 1,-3c0.38269,-0.92387 1,-5 1,-6c0,-1 2.29291,-0.29289 3,-1c0.70709,-0.70711 1,-1 2,-1c1,0 2,-2 3,-2c1,0 2.69345,-0.4588 4,-1c0.92389,-0.38269 2,0 3,0c1,0 2,0 4,0c1,0 2,0 4,0c1,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 4,0c1,0 2,0 3,0c1,0 2.01291,-0.16019 3,0c3.12143,0.50655 4,1 6,1c2,0 3,0 4,0c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1.02676,0.77025 2,1c2.17624,0.51375 2.4588,1.69344 3,3c0.38269,0.92387 0,2 0,4c0,1 0,2 0,3c0,1 -0.70709,2.29289 0,3c0.70709,0.70711 1,1 1,3c0,1 0,2 0,3c0,1 0,2 0,3c0,2 1,4 1,5c0,1 0,5 0,8c0,1 0,2 0,4c0,2 0,3 0,4c0,1 0,2 0,3l1,0" id="svg_16" stroke-linecap="round" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="#bf5f00" />
                            <path d="m67,112c0,0 0,0 1,0c2,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 4,0l1,0l1,0l0,1" id="svg_19" stroke-linecap="null" stroke-linejoin="null" stroke="#000000" fill="none" />
                            <path d="m99,113c1,0 2,0 4,0c1,0 1.61731,-0.07612 2,-1c0.5412,-1.30656 2,-2 3,-2c1,0 2.58578,1.41422 4,0c0.70711,-0.70711 1,-1 2,-1c1,0 2,0 3,0l1,0l2,0" id="svg_20" stroke-linecap="null" stroke-linejoin="null" stroke="#000000" fill="none" />
                            <polyline stroke-width="6" id="svg_21" points="74,119 74,119 74,119 " stroke-linecap="round" stroke-linejoin="null" stroke="#000000" fill="none" />
                            <polyline id="svg_22" points="112,123 112,123 " stroke-linecap="round" stroke-linejoin="null" stroke-width="8" stroke="#000000" fill="none" />
                            <line id="svg_23" y2="144" x2="72" y1="137" x1="105" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                        </g>
                    </svg>
                </td>
                <td>
                    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" id="head2">
                        <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
                        <g>
                            <title>Layer 1</title>
                            <ellipse ry="44" rx="44" id="svg_8" cy="129" cx="92" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                            <line id="svg_15" y2="97" x2="21" y1="98" x1="163" stroke-linecap="round" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none" />
                            <path d="m60,95c0,-1 0,-2 0,-3c0,-2 0,-3 0,-5c0,-3 0,-5 0,-6c0,-3 0,-4 0,-5c0,-1 0,-2 0,-3c0,-3 1,-4 1,-5c0,-1 0,-2 0,-4c0,-2 1,-3 1,-6c0,-1 0.4588,-1.69344 1,-3c0.38269,-0.92387 1,-5 1,-6c0,-1 2.29291,-0.29289 3,-1c0.70709,-0.70711 1,-1 2,-1c1,0 2,-2 3,-2c1,0 2.69345,-0.4588 4,-1c0.92389,-0.38269 2,0 3,0c1,0 2,0 4,0c1,0 2,0 4,0c1,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 4,0c1,0 2,0 3,0c1,0 2.01291,-0.16019 3,0c3.12143,0.50655 4,1 6,1c2,0 3,0 4,0c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1.02676,0.77025 2,1c2.17624,0.51375 2.4588,1.69344 3,3c0.38269,0.92387 0,2 0,4c0,1 0,2 0,3c0,1 -0.70709,2.29289 0,3c0.70709,0.70711 1,1 1,3c0,1 0,2 0,3c0,1 0,2 0,3c0,2 1,4 1,5c0,1 0,5 0,8c0,1 0,2 0,4c0,2 0,3 0,4c0,1 0,2 0,3l1,0" id="svg_16" stroke-linecap="round" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="#bf5f00" />
                            <path d="m67,112c0,0 0,0 1,0c2,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 4,0l1,0l1,0l0,1" id="svg_19" stroke-linecap="null" stroke-linejoin="null" stroke="#000000" fill="none" />
                            <polyline stroke-width="6" id="svg_21" points="74,119 74,119 74,119 " stroke-linecap="round" stroke-linejoin="null" stroke="#000000" fill="none" />
                            <path d="m105,112c0,0 0,0 1,0c1,0 2,0 3,0c1,0 2,0 3,0c2,0 3,-1 4,-1l1,0l1,0" id="svg_24" stroke-linecap="null" stroke-linejoin="null" stroke="#000000" fill="none" />
                            <polyline id="svg_25" points="110,118 110,118 " stroke-linecap="round" stroke-linejoin="null" stroke-width="6" stroke="#000000" fill="none" />
                            <polyline id="svg_26" points="75,120 75,120 " stroke-linecap="round" stroke-linejoin="null" stroke-width="6" stroke="#000000" fill="none" />
                            <polyline id="svg_27" points="109,120 109,120 " stroke-linecap="round" stroke-linejoin="null" stroke-width="3" stroke="#000000" fill="none" />
                            <path d="m108,137c0,0 -0.29289,-0.70711 -1,0c-0.70711,0.70711 -0.29289,1.29289 -1,2c-0.70711,0.70711 -1.29289,0.29289 -2,1c-0.70711,0.70711 -0.29289,1.29289 -1,2c-0.70711,0.70711 -2,0 -4,0c-1,0 -1,1 -2,1c-1,0 -2,0 -3,0c-1,0 -3,0 -4,0c-1,0 -2,0 -3,0c-1,0 -2,0 -4,0c-1,0 -1,-1 -1,-2c0,-1 -1,-1 -1,-2l-1,0l0,-2l0,1" id="svg_28" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
                            <rect id="svg_29" height="15" width="24" y="109" x="62" stroke-linecap="round" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
                            <rect id="svg_30" height="17" width="25" y="108" x="97" stroke-linecap="round" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
                            <line id="svg_31" y2="118" x2="100" y1="118" x1="85" stroke-linecap="round" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
                            <line id="svg_32" y2="108" x2="133" y1="117" x1="124" stroke-linecap="round" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
                            <line id="svg_33" y2="107" x2="53" y1="116" x1="61" stroke-linecap="round" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
                        </g>
                    </svg>
                </td>
            </tr>
            <tr>
                <td>
                    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" id="shirt1">
                        <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
                        <g>
                            <title>Layer 1</title>
                            <rect id="svg_2" height="16" width="0" y="61" x="62" stroke-width="5" stroke="#ff0000" fill="#FF0000" />
                            <rect id="svg_3" height="70" width="50" y="50" x="70" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#ff0000" fill="#FF0000" />
                            <rect id="svg_4" height="10" width="30" y="50" x="110" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#ff0000" fill="#FF0000" />
                            <rect id="svg_5" height="10" width="30" y="50" x="50" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#ff0000" fill="#FF0000" />
                        </g>
                    </svg>
                </td>
                <td>
                    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" id="shirt2">
                        <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
                        <g>
                            <title>Layer 1</title>
                            <rect id="svg_2" height="16" width="0" y="61" x="62" stroke-width="5" stroke="#ff0000" fill="#FF0000" />
                            <rect id="svg_3" height="70" width="50" y="50" x="70" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#00bf00" fill="#00bf00" />
                            <rect id="svg_4" height="10" width="30" y="50" x="110" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#00bf00" fill="#00bf00" />
                            <rect id="svg_5" height="10" width="30" y="50" x="50" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#00bf00" fill="#00bf00" />
                        </g>
                    </svg>
                </td>
            </tr>
        </table>
    </div>
    <form name="cgx" method="POST" action="http://localhost/cgi-bin/script.pl" class="bottom" id="temp">
        <input type="hidden" id="he1l" name="he1l">
        <input type="hidden" id="he1t" name="he1t">
        <input type="hidden" id="he2l" name="he2l">
        <input type="hidden" id="he2t" name="he2t">
        <input type="hidden" id="sh1l" name="sh1l">
        <input type="hidden" id="sh1t" name="sh1t">
        <input type="hidden" id="sh2l" name="sh2l">
        <input type="hidden" id="sh2t" name="sh2t">
        <input type="test" placeholder="enter name for your design" name="file_name">
        <br/>
        <br/>
        <br/>
        <input type="button" class="comic_button" id="joma" name="jomakoreje" value="submit" onclick="clicker()">
    </form>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题