Javascript 如何使用JQuery在框中定位以下元素？_Javascript_Jquery_Html_Css

Javascript 如何使用JQuery在框中定位以下元素？

javascript jquery html css

Javascript 如何使用JQuery在框中定位以下元素？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,您好，我有以下代码，需要能够在容器中包含的框（#third）中定位这两个元素。请提供两个元件的定位代码。我需要定位以下元素（请参见以下几行） append（'${t}^x\sqrt{t}^x$$）；及追加（'Filename:'）；功能allowDrop（ev）{ ev.preventDefault（）； } 功能阻力（ev）{ ev.dataTransfer.setData（“文本”，ev.target.id）； } //ev.target.id这为我们提供了被拖动符号的id 功能下降

您好，我有以下代码，需要能够在容器中包含的框（#third）中定位这两个元素。请提供两个元件的定位代码。我需要定位以下元素（请参见以下几行）

append（'${t}^x\sqrt{t}^x$$）；及
追加（'Filename:'）；


功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
//ev.target.id这为我们提供了被拖动符号的id
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
//ev.target.appendChild（document.getElementById（数据））；
交换机（数据）
{
案例（“第8条”）：
$（'#second'）.append（'${t}^x\sqrt{t}^x$'）；
$（“#容器”）。追加（“”）；
$（'#third'）。追加（'${t}^x\sqrt{t}^x$'）；
$（'#third'）。追加（'Filename:'）；
打破
违约：
}
Queue（[“Typeset”，MathJax.Hub，“second”]）；
Queue（[“Typeset”，MathJax.Hub，“third”]）；
}
#标题{
宽度：100%；
背景色：白色；
高度：30px；
}
#容器{
宽度：600px；
高度：1500px
背景色：#ffffff；
保证金：自动；
}
#首先{
宽度：100px；
边框：2件纯黑；
浮动：左；
高度：400px；
}
#第二{
宽度：300px；
边框：2件纯黑；
排名：0；
浮动：对；
高度：100px；
}
#第三{
位置：绝对位置；
顶部：180像素；
边框：2件纯黑；
右：430px；
宽度：200px；
高度：100px；
} 
#第三，权力1{
宽度：20px；
高度：10px；
浮动：左；
边框：2件纯黑；
}
#清楚的{
明确：两者皆有；
}
$${t}^x\sqrt{t}^x$$

合并3个附录

 $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)">$${t}^x\sqrt{t}^x$$<label>Filename:</label> <input type="text" name="file"  id="file" /></div>');

$（“#容器”）.append（“$${t}^x\sqrt{t}^x$$Filename:”）；

你所说的职位是什么意思。如果我没弄错的话，你想把你的值附加到

@Shubham谢谢。如果您看到附加显示{t}^x\sqrt{t}^x符号，我希望能够将输入文本框定位在第一个t的正上方，以便用户可以输入电源，第二个t也是如此。我还希望用户能够通过另一个文本输入框输入电源。定位应跨平台，即镀铬和FF。希望对您有所帮助。@Shubham我尝试了以下代码，但仍然不起作用$（“#third”）.append（“$${t}^x\sqrt{t}^x$$”）.css（{“字体大小”、“75%”、“位置”、“绝对”、“左”、“100px”、“顶部”、“150px”}）；你能提供一个更干净的jsfiddle@madalin吗。我不知道你是什么意思？是否允许我在提供的链接处修改代码以包含整个HTML代码？

<script>

function allowDrop(ev) {

    ev.preventDefault();
}

function drag(ev) {

    ev.dataTransfer.setData("text", ev.target.id);
}

//ev.target.id this gives us the id of the symbol being dragged

function drop(ev) {

    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    //ev.target.appendChild(document.getElementById(data));

    switch(data)
    {

       case("drag8"):

          $('#second').append('$${t}^x\sqrt{t}^x$$');
          $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)"></div>');
          $('#third').append('$${t}^x\sqrt{t}^x$$');

          $('#third').append('<label>Filename:</label> <input type="text" name="file"  id="file" />');

          break;

       default:
    }
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"second"]);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"third"]);

}
</script>


<style>

#header {
    width: 100%;
    background-color: white;
    height: 30px;
}

#container {
    width: 600px;
    height:1500px
    background-color: #ffffff;
    margin: auto;
}
#first {
    width: 100px;
    border: 2px solid black;
    float: left;
    height: 400px;

}
#second {
    width: 300px;
    border: 2px solid black;
    top:0;
    float: right;
    height: 100px;

}

#third {

    position: absolute;
    top: 180px;
    border: 2px solid black;
    right:430px;
    width: 200px;
    height: 100px;

} 

#third .power1{

  width: 20px;
  height: 10px;
  float: left;
  border: 2px solid black;
}

#clear {
    clear: both;
}


</style>

</head>
<body>


<div id="header"></div>
<div id="container">
   <div id="first">
   <span id="drag8" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${t}^x\sqrt{t}^x$$</span>
    </div>
    <div id="second" ondrop="drop(event)" ondragover="allowDrop(event)">    </div>
<div id="clear"></div>
</div>

</body>

 $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)">$${t}^x\sqrt{t}^x$$<label>Filename:</label> <input type="text" name="file"  id="file" /></div>');