<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 放置（Droppable）</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
#cart td{width: 200px;height: 30px;}
.close{
right: -21px;
float: right;
cursor: hand;
cursor: pointer;
margin-top: -6px;
margin-right: -1px;
}
</style>
<script>
$(function() {
//$( "ul, li" ).disableSelection();
$("#draggable1,#draggable2 ").draggable({
connectToSortable: "#cart td.container",
helper: "clone",
revert: "invalid"
});
$("#cart td.container").droppable({
drop: function(event, ui) {
var liE = $(this).find("li");
if(liE.length > 0){
liE.remove();
}
var content = '<a class="close">×</a>'+ui.draggable.text().replace(/×| /g,'');
$("<li></li>").draggable({
appendTo: "body",
helper: "clone"
}).html(content).addClass('ui-state-highlight ui-draggable ').css('list-style-type','none').appendTo(this);
$(this).find("li a.close").click(function(){
$(this).closest('li').remove();
});
}
});
});
</script>
</head>
<body>
<ul>
<li id="draggable1" class="ui-state-highlight"> 班次一</li>
<li id="draggable2" class="ui-state-highlight">班次二</li>
</ul>
<div id="cart">
<table class="ui-widget-content" border="1px;">
<thead>
<tr>
<td colspan="7">排班信息</td>
</tr>
</thead>
<tbody>
<tr>
<td>
2017/1/18
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td>
</td>
</tr>
<tr>
<td>
2017/1/19
</td>
<td class="container">
</td >
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
</tr>
<tr>
<td>
2017/1/20
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
</tr>
<tr>
<td>
2017/1/21
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
</tr>
<tr>
<td>
2017/1/22
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
<td class="container">
</td>
</tr>
<tr>
<td>
</td>
<td>
用户1
</td>
<td>
用户2
</td>
<td>
用户3
</td>
<td>
用户4
</td>
<td>
用户5
</td>
<td>
用户6
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
分享到：
相关推荐
基于 Vue 实现的 gantt-like 图表 ,用于排班展示
FullCalendar 2.9 实现的排课页面，实现了课程展示，bootstrap弹框，layer浮动层展示功能
简单的医院排班，实现了文本的拖拽，数据库的读写。
vue 使用 sortable 实现 el-table 拖拽排序功能 本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示： npm 下载： npm install sortablejs --save 引入： import Sortable from ...
基于vue实现甘特图实现上下拖拽，达到排班的要求，之前困于没有好的方案，在我研究两周后最终实现甘特图的拖拽效果
设计讲解请参考：http://www.cnblogs.com/limengqiang/archive/2012/12/18/DragFlow.html
本文实例为大家分享了Vue实现简单拖拽效果的具体代码，供大家参考，具体内容如下 自定义指令v-drag l 存在时 只能横向拖拽 t 存在时 只能纵向拖拽 lt都存在时 可以任意方向拖拽 <!DOCTYPE html> <...
今天有个朋友说要做个效果：Vue实现拖拽排序，要有 checked，输出结果是排序后的，要全选，未选中的不能拖动。 其实我之前基于 Sortable 做过一个类似的效果。也给他看过了，没看太明白，他就自己基于 vuedraggable ...
利用jquery拖拽插件，实现了个性化的拖拽功能，如人员排班等等
教师可以自由排座位，可以拖动，并可以导出到word,如果是xp系统无法运行，请先下载安装.net framework 2.0
事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。 案例一： 开始的我，so easy！ 通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内...