1

为什么这种情况不断发生？

我添加了一个可拖动元素，将其移动到位，然后将所有内容预先放置并向下移动或使页面变大？有没有办法让 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;
}

提前加油！！！！

4

1 回答 1

0

这是完整的工作代码：jsFiddle：http: //jsfiddle.net/ycgmt/

变化：

1: <div> 而不是 <table>

2: append() 而不是 prepend()

3：类而不是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();
     });
});
于 2012-12-29T10:01:52.153 回答