一.效果。如下图中，各途中可相互拖拉，右下角可删除。注意图1和图2对比区别
图1
图2
二.源码详解
html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>公告页面管理</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="report_page.js"></script>
<style type="text/css">
.page_title{
width:90%; }
header{
height: 60px;
border-bottom: 1px solid #f0f0f0;
line-height: 60px;
margin-bottom: 30px;
background-color:#243141;
}
.navigation {
height: 40px;
line-height:40px;
width: 100%;
background-color: #2175bc;
}
a {
text-decoration: none;
}
a:hover {text-decoration: none;}
.navigator_zy {
float: left;
font-size: 15px;
text-decoration: none;
color: #FFF;
padding-left: 30px;
padding-left: 30px;
} .navigator_zy>a>span {
color: #fff;
}
#dropzone {
padding: 20px;
background: #eaeaea;
min-height: 100px;
overflow: hidden;
} .item {
float:left;
width:145px;
height:220px;
cursor: pointer;
margin: 5px;
padding: 5px 10px;
border-radius: 3px;
position: relative;
} .item .remove {
position: absolute;
bottom: 0px;
right: 0px;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.fanhuiimg {
float: right;
margin-right: -26px;
margin-top: 60px;
width: 26px;
height: 87px;
cursor: pointer;
}
</style>
</head>
<body> <div class="container">
<div id="dropzone">
<div class="item drop-item" idStr="1" style="background:url(image/1.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="2" style="background:url(image/2.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="3" style="background:url(image/3.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="4" style="background:url(image/4.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="5" style="background:url(image/5.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="6" style="background:url(image/6.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="7" style="background:url(image/7.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</body>
</html>
js源码
$(function(){
$('.btn.remove').click(function(){
if(confirm("确定要删除页面吗？")) {
$(this).parent().detach();
}
});
var dropable = $('#dropzone').droppable({
activeClass : 'active',
hoverClass : 'hover',
accept : ":not(.ui-sortable-helper)"
});
dropable.sortable({
items : '.drop-item',
sort : function() {
$(this).removeClass("active");
}
});
$('#report_page_save_btn').click(function(){
save();
});
$('#report_page_def_btn').click(function(){
if(confirm("确定要恢复页面数据吗？")) {
set_def();
}
});
});
使用其他第三方js结构如下。其实就只有使用了jquery-ui
另一个简单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>公告页面管理</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body> <div id="draggable" class="ui-widget-content">
<p>请把我拖拽到目标处！</p>
</div> <div id="droppable" class="ui-widget-header">
<p>请放置在这里！</p>
</div> </body>
</html>