<!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>
分享到：
相关推荐
6. **交互性**：Vue.js提供事件监听和处理能力，使得用户可以通过点击、拖动等操作来查看任务详情或调整任务时间。这需要我们在组件中定义相应的事件处理器。 7. **第三方库集成**：虽然Vue.js本身提供了丰富的功能...
这里我们设置了动画效果、拖拽触发的目标、不可拖动的类名以及拖拽过程中的样式类名： ```javascript methods: { initSortable() { const ele = this.$refs.dragTable.$el.querySelector(".el-table__body > ...
标题"基于vue的甘特图，可上下拖拽"表明这个项目的核心在于Vue.js与甘特图的结合，并且重点在于实现了甘特图的任务条上下拖动的功能。这通常意味着用户可以通过鼠标操作直接调整任务的时间安排，使得界面交互更加...
1. **文本的拖拽功能**： 在Delphi中，实现文本的拖放操作通常涉及到TDropTarget和TDragSource组件。通过设置控件的DragMode属性为dmAutomatic或dmManual，可以启用拖放功能。同时，需要处理OnDragOver和OnDrop事件...
全历（FullCalendar）是一款非常流行的JavaScript库，用于在网页上创建美观且功能丰富的日历应用。在2.9版本中，它提供了强大的排课功能，使得开发者能够轻松地实现课程展示、拖放操作以及与Bootstrap和Layer等库的...
标题 "BS拖拽工作流Demo" 提供了一个关于Web应用中的拖放工作流实现的示例，这通常涉及用户界面的交互性和流程自动化。在现代软件开发中，工作流管理系统被广泛应用于各种业务场景，例如审批流程、任务分配等。这种...
在 Vue 中实现拖拽排序功能，可以借助第三方库 vuedraggable。vuedraggable 是基于 Sortable.js 的 Vue 适配器，它允许用户轻松地在 Vue 组件之间进行拖放操作，并且能够保持数据模型同步。在本文中，我们将探讨如何...
"jquery 拖拽"是jQuery的一个重要应用领域，它允许用户通过鼠标拖动元素来实现各种交互式功能，比如在描述中提到的“人员排班”等应用场景。 jQuery拖拽功能通常是通过jQuery UI库中的Draggable组件来实现的。...
在线演示 源码下载 ...如果您还想要拖动日程的功能，那么还需要加入jQuery ui插件。 <link rel="stylesheet" type="text/css" href="css/fullcalendar.css" rel="external nofollow" > [removed][removed]
4. **事件处理**：组件提供了丰富的事件监听器，例如点击、拖拽等，方便开发者扩展功能，如添加编辑事件对话框。 5. **插件兼容性**：虽然它不直接依赖fullCalendar.js，但通过适当的封装和适配，可能与fullCalendar...
- **排班日历**：可视化展示生产排班情况，便于管理和调度。 - **仓储管理**：监控库存，防止过度积压或短缺。 - **库存现有量**：实时更新库存信息，辅助决策。 - **条码管理**：利用条形码或二维码追踪物料和...
- 修改部门归属：选中部门，按住左键拖动到新上级部门，按提示操作。 2. 员工维护 - 录用与离职管理：从“员工框”中选择离岗员工进行录用或移除，调整员工所在部门。 - 员工信息录入：必填项包括姓名和考勤号码，...
在IT行业中，前端开发是至关重要的一环，而Vue.js作为一款流行的前端框架，因其轻量级、易上手和强大的功能而备受开发者喜爱。Vue3的发布更是带来了许多改进和优化，使得它在性能和可维护性方面更上一层楼。...
本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下 主要使用vuedraggable和sortablejs两个组件。 1、安装组件 npm install vuedraggable npm install sortablejs 2...
用户可以放大、缩小、拖动地图，查看具体地理位置信息。 3.6 排班设置 3.6.4 线路排班 在排班管理中，用户可以为每个巡逻线路制定详细的排班计划，包括人员分配、时间安排等。这有助于优化人力资源，确保巡逻工作...
8. **PivotTable透视表**：强大的数据分析工具，通过拖拽字段进行汇总，可以快速生成复杂报表，非常适合大数据量的分析。 9. **公式审核**：使用“公式”菜单中的“追踪引用”和“查看公式”功能，可以查看公式的...
在Vue.js框架中，FullCalendar是一个非常流行的库，用于创建功能丰富的日历组件，它可以用于显示日程安排、事件管理等。本项目示例将详细阐述如何在Vue中集成并使用FullCalendar，以实现一个完整的日程安排系统。...
FullCalendar 是一个jQuery插件，它提供一个全尺寸，像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 （如单击或拖动事件） ...
通过图形化界面，用户可以直观地拖拽检查点，创建和编辑巡逻线路，并可预览和保存。 1.5.3 电子地图 系统内置电子地图，用于显示巡逻路线和检查点，同时支持地图的缩放、平移等操作，方便规划和调整巡逻路径。 3.6...