Question

为什么会这种情况继续发生？

我添加了一个可拖动的元素，将其移动到位，然后它会预先设置并将所有内容向下移动或使页面变大？有没有办法让div出现在同一个地方，而不是移动页面上的其他元素？这让我发疯了！

HTML：

<!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>

JavaScript的：

$(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());
 });

});

CSS：

#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;
}

提前干杯!!!!

Answer 1

以下是完整的代码：jsFiddle：http://jsfiddle.net/ycgmt/

<强>的变化：

1：＆lt; div＆gt;而不是＆lt; table＆gt;

2：append（）而不是prepend（）

3：class而不是id

4：位置：绝对

<强> HTML

<!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>

<强> CSS

.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;
}

<强> JS

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

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

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

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

1 个答案: