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: <table> の代わりに <div>

2: prepend() の代わりに append()

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 に答える