html5拖放 <div> 入位
[英]html5 drag and drop <div>s into positions
問題描述
我已經將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%;
}
1 個解決方案
解決方案1
3 已采納 2015-06-23 14:18:25
由於您已經在使用jQuery，並且如果您願意使用jQuery UI插件，那么jQuery UI正是您想要的Sortable交互功能。 https://jqueryui.com/sortable/
編輯：我沒有在您的代碼的頂部看到您已經具有jQuery UI的腳本。 因此，使用它應該很好。
在HTML5中拖放div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.