Javascript html5拖放<；部门>；他进入了位置
我已经使我的div可以拖放，但是我要达到的效果是将一个div拖动到一个位置，然后其他div将调整到该位置，并且我只希望div拖放到某个区域。例如，我想将第一个div拖动到列表中的第三个位置，因此我将在位置2和3之间拖动它，然后divs将重新调整并“单击”到位。你可以看到我注释了一些我一直在尝试的脚本，因为我已经尝试了一些东西。现在代码所做的是当一个元素被拖动到另一个元素时，它将消失在元素后面，而不是占据元素的位置。提前谢谢你 这是我的密码：Javascript html5拖放<；部门>；他进入了位置,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我已经使我的div可以拖放，但是我要达到的效果是将一个div拖动到一个位置，然后其他div将调整到该位置，并且我只希望div拖放到某个区域。例如，我想将第一个div拖动到列表中的第三个位置，因此我将在位置2和3之间拖动它，然后divs将重新调整并“单击”到位。你可以看到我注释了一些我一直在尝试的脚本，因为我已经尝试了一些东西。现在代码所做的是当一个元素被拖动到另一个元素时，它将消失在元素后面，而不是占据元素的位置。提前谢谢你 这是我的密码： <!DOCTYPE html> &l
<!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>
既然您已经在使用jQuery，并且如果您愿意使用jqueryui插件，那么jqueryui正是您所需要的可排序交互
编辑：我在代码顶部没有看到您已经有了jQueryUI的脚本。因此，您应该很好地使用它。因为您已经在使用jQuery，如果您愿意使用jQuery UI插件，那么jQuery UI正是您所需要的可排序交互
编辑：我在代码顶部没有看到您已经有了jQueryUI的脚本。因此，您应该很好地使用它。因为您已经在使用jQuery，如果您愿意使用jQuery UI插件，那么jQuery UI正是您所需要的可排序交互
编辑：我在代码顶部没有看到您已经有了jQueryUI的脚本。因此，您应该很好地使用它。因为您已经在使用jQuery，如果您愿意使用jQuery UI插件，那么jQuery UI正是您所需要的可排序交互
编辑：我在代码顶部没有看到您已经有了jQueryUI的脚本。因此，您应该很乐意使用它。该工具看起来很有用，我在代码中实现了它，但是它工作不正常，可能是因为div元素在列表中。您可以发布新代码吗？或者，更好的是，把它弄得一团糟：。修复非常简单！您只需要为列表项设置一些CSS。查看CSS代码的结尾：。该工具看起来很有用，我在代码中实现了它，但是它工作不正常，可能是因为div元素在列表中？您可以发布新代码吗？或者，更好的是，把它弄得一团糟：。修复非常简单！您只需要为列表项设置一些CSS。查看CSS代码的结尾：。该工具看起来很有用，我在代码中实现了它，但是它工作不正常，可能是因为div元素在列表中？您可以发布新代码吗？或者，更好的是，把它弄得一团糟：。修复非常简单！您只需要为列表项设置一些CSS。查看CSS代码的结尾：。该工具看起来很有用，我在代码中实现了它，但是它工作不正常，可能是因为div元素在列表中？您可以发布新代码吗？或者，更好的是，把它弄得一团糟：。修复非常简单！您只需要为列表项设置一些CSS。请参见以下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%;
}