【发布时间】：2015-06-23 14:11:51
【问题描述】：
我已经让我的 div 可以拖放，但是我想要的效果是将一个 div 拖到一个位置，然后其他 div 会调整到它，我希望 div 只放在某个区域。例如，我想将第一个 div 拖到列表中的第三个位置，所以我会将它拖到位置 2 和 3 之间，然后 div 会重新调整并“单击”到位。你可以看到我注释掉了一些我一直在尝试的脚本，因为我已经尝试了几件事。现在代码所做的是当一个元素被拖动到另一个元素时，它不会占据元素的位置，而是会消失在元素的后面。提前谢谢！
这是我的代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/carousel.js" />
<link rel="stylesheet" type="text/css" href="shopping.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<header>
<h2>Premium Computer Supplies!</h2>
</header>
<body>
<!----------------------------------------------------------------->
<!--<div id="all">-->
<div class="row" id="box1" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img id="a" src="surface3.jpg" alt="Microsoft Surface">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3</h3>
<div id="pnd1">
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $999!</p>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<div class="row" id="box2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img id="b" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3 Typer Cover</h3>
<div id="pnd2">
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $129!</p>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<div class="row" id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img id="c" src="mabook.jpg" alt="Apple Macbook Pro Retina">
<!--Accordion heading-->
<h3>Macbook Pro Retina Display</h3>
<div id="pnd3">
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $1299!</p>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<div class="row" id="box4" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img id="d" src="superdrive.jpg" alt="Apple SurperDrive">
<!--Accordion heading-->
<h3>Apple SuperDrive</h3>
<div id="pnd4">
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $79!</p>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<div class="row" id="box5" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img id="e" src="case1.jpg" alt="Laptop Case">
<!--Accordion heading-->
<h3>Laptop Case</h3>
<div id="pnd5">
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $39!</p>
</div>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<script>
$( ".row" ).mouseenter(function() {
$(this).animate({
fontSize : '17',
opacity : '0.6'
}, 1);
});
$( ".row" ).mouseleave(function() {
$(this).animate({
fontSize : '14',
opacity : '1'
}, 1);
});
/* $(document).ready(function(){
$("p").animate({
height: 'toggle'
});
}); */
$("div#box1").click(function(){
$("#pnd1").animate({
height: 'toggle'
});
});
$("div#box2").click(function(){
$("#pnd2").animate({
height: 'toggle'
});
});
$("div#box3").click(function(){
$("#pnd3").animate({
height: 'toggle'
});
});
$("div#box4").click(function(){
$("#pnd4").animate({
height: 'toggle'
});
});
$("div#box5").click(function(){
$("#pnd5").animate({
height: 'toggle'
});
});
/* $(function() {
$( ".row" ).draggable();
});
$( ".row" ).droppable({
drop: function( event, ui ) {
$( this )
}
})*/
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
CSS：
img {
width:290px;
height:200px;
}
header{
background-color: royalblue;
color:gold;
padding-left: 0;/*why is this not working*/
width:100%
}
body{
width:90%;
background-color: lightgray;
font-size: 3;
padding-left: 5%
}
.row{
background-color: white;
float:left;
width:300px;
height:400px;
padding-left: 1px;
border: 1px solid royalblue;
margin: 2px;
}
#all{
width:90%;
}
【问题讨论】：
标签： javascript jquery css html