將div元素添加到我的頁面時，所有其他可拖動項目都會移動？

我添加了一個可拖動的元素，將它移動到位，然後它將prepends和向下移動或使頁面變大？有沒有辦法讓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()); 
}); 

});

CS S：

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

乾杯提前!!!!

來源

2012-12-29 Ferg

這裏是完全工作的代碼：的jsfiddle：http://jsfiddle.net/ycgmt/

的變化：的<DIV>代替<表>

2：

1追加（）而不是前置（）

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

$(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-29 10:01:52 ATOzTOA

我試過這個，它在將新代碼放在同一點上時工作，但它將前一個div移動了100px，我將其設置爲寬度 – Ferg

您是否希望divs在彼此之上？ – ATOzTOA

是的，但似乎沒有得到的CSS工作定位工作的新元素，因爲他們是可拖動的 – Ferg

將div元素添加到我的頁面時，所有其他可拖動項目都會移動？

回答

相關問題