<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="jquery-ui.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.drag-wrapper {
width: 400px;
margin: 50px auto 0;
/*border: 10px solid #000;*/
}
.drag-bar {
height: 40px;
font-size: 20px;
font-weight: bold;
line-height: 40px;
text-align: center;
background-color: #E6E6E6;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: move;
}
.resize-item {
height: 212px;
border: 1px solid #e6e6e6;
}
.sort-wrapper {
height: 100%;
overflow: hidden;
}
.sort-item {
list-style: none;
padding-top: 10px;
}
.sort-item li {
height: 40px;
line-height: 40px;
padding-left: 20px;
cursor: pointer;
}
.sort-item li:hover {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<div class="drag-wrapper">
<div class="drag-bar">可拖动、排序、变形的新闻模块</div>
<div class="resize-item">
<div class="sort-wrapper">
<ul class="sort-item">
<li>这是第1条新闻!</li>
<li>这是第2条新闻!</li>
<li>这是第3条新闻!</li>
<li>这是第4条新闻!</li>
<li>这是第5条新闻!</li>
<li>这是第6条新闻!</li>
<li>这是第7条新闻!</li>
<li>这是第8条新闻!</li>
<li>这是第9条新闻!</li>
<li>这是第10条新闻!</li>
</ul>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function () {
//框的拖拽
$(".drag-wrapper").draggable({
handle:".drag-bar"//指定拖拽的区域
});
//给ul里面的li排序
$(".sort-item").sortable({
opacity:0.3//设置鼠标放上去时的透明度
});
//设置新闻框的扩大
$(".resize-item").resizable({
//只能往下扩大,相当于东南西北
handles:"s"
});
});
</script>
</body>
</html>
jq实现ui插件实现新闻拖拽框
最新推荐文章于 2021-11-27 09:27:12 发布