Javascript 将divs元素添加到“我的页面”时，所有其他可拖动的项目都会移动吗？_Javascript_Jquery

Javascript 将divs元素添加到“我的页面”时，所有其他可拖动的项目都会移动吗？

javascript jquery

Javascript 将divs元素添加到“我的页面”时，所有其他可拖动的项目都会移动吗？,javascript,jquery,Javascript,Jquery,为什么这种情况不断发生我添加了一个可拖动的元素，将其移动到适当的位置，然后将所有内容进行预处理并向下移动，或者使页面变大？是否有一种方法可以使div显示在同一位置，而不移动页面上的其他元素？这快把我逼疯了 HTML: 提前干杯以下是完整的工作代码：jsFiddle: 变化： 1:代替 2：附加而不是前置 3：类而不是id 4：位置：绝对位置 HTML JS 我已经尝试过这个方法，它可以将新代码放在同一点上，但是它将之前的div移动了100px，我将其设置为宽度。您希望div彼此重叠吗？是的，

为什么这种情况不断发生

我添加了一个可拖动的元素，将其移动到适当的位置，然后将所有内容进行预处理并向下移动，或者使页面变大？是否有一种方法可以使div显示在同一位置，而不移动页面上的其他元素？这快把我逼疯了

HTML:

提前干杯

以下是完整的工作代码：jsFiddle:

变化：

1:代替

2：附加而不是前置

3：类而不是id

4：位置：绝对位置

HTML

我已经尝试过这个方法，它可以将新代码放在同一点上，但是它将之前的div移动了100px，我将其设置为宽度。您希望div彼此重叠吗？是的，但似乎无法让css工作定位以处理新元素，因为它们是可拖动的。您可以为您的问题创建一个JSFIDLE.net示例吗？

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draggable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="stylesheet.css">

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>


<h2></h2>
    <form name="checkListForm">
        <input type="text" name="checkListItem"/>
    </form>
    <div id="button">Add!</div>
    <br/>
<table><tr><td id="place"></td></tr></table>

 </body>
</html>

$(document).ready(function()
{
 //$( '#draggable' ).draggable();
 $('#button').click(function()
 {
     var toAdd = $('input[name=checkListItem]').val();
     var $newdiv = "<div id='draggable'>" + toAdd + "</div>";
     //$("#place").html($($newdiv).draggable());

     $("#place").prepend($($newdiv).draggable());
 });

});

#draggable {
 z-index:1;
 width: 100px;
 height: 100px;
 background: #ccc;
}

h2 {
 font-family:arial;
}

form {
 display: inline-block;
}

#button{
 display:inline-block;
 height:20px;
 width:70px;
 background-color:#cc0000;
 font-family:arial;
 font-weight:bold;
 color:#ffffff;
 border-radius: 5px;
 text-align:center;
 margin-top:2px;
}

#item {
 font-family:garamond;
 color:#000000;
 width:90%;
 height:800px;
 background-color:#cc0000;
}

#place {
 z-index:1;
 font-family:garamond;
 color:#000;
 width:800px;
 height:800px;
 background-color:#f00;
}

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>draggable demo</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>

<body>
    <h2></h2>
    <form name="checkListForm">
        <input type="text" name="checkListItem"/>
    </form>
    <div id="button">Add!</div>
    <br/>

    <div id="place"></div>

</body>
</html>

.draggable {
     width: 100px;
     height: 100px;
     background: #ccc;
     position:absolute;
}

h2 {
    font-family:arial;
}

form {
    display: inline-block;
}

#button{
     display:inline-block;
     height:20px;
     width:70px;
     background-color:#cc0000;
     font-family:arial;
     font-weight:bold;
     color:#ffffff;
     border-radius: 5px;
     text-align:center;
     margin-top:2px;
}

#item {
     font-family:garamond;
     color:#000000;
     width:90%;
     height:800px;
     background-color:#cc0000;
}

#place {
     z-index:1;
     font-family:garamond;
     color:#000;
     width:800px;
     height:800px;
     background-color:#f00;
}

$(document).ready(function()
{
     $('#button').click(function()
     {
         var toAdd = $('input[name=checkListItem]').val();
         var newdiv = $("<div class='draggable'>" + toAdd + "</div>");

         $("#place").append(newdiv);

         $(newdiv).draggable();
     });
});