拖拽-排班

最新推荐文章于 2024-05-25 20:23:08 发布
最新推荐文章于 2024-05-25 20:23:08 发布
阅读量571 收藏
点赞数
分类专栏： jquery draggable 文章标签： javascript 前端 java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengkuangshl/article/details/84853438
版权 
<!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>
fengkuangshl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue实现平滑过渡的拖拽排序功能
10-16
主要介绍了vue实现平滑过渡的拖拽排序功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
基于Vue实现的ganttlike图表用于排班展示
08-09
6. **交互性**：Vue.js提供事件监听和处理能力，使得用户可以通过点击、拖动等操作来查看任务详情或调整任务时间。这需要我们在组件中定义相应的事件处理器。 7. **第三方库集成**：虽然Vue.js本身提供了丰富的功能...
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
10-15
主要介绍了Vue 基于 vuedraggable 实现选中、拖拽、排序效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue 拖拽排版 vuedraggable（三方组件）
weixin_65478269的博客
03-11 1708
拖拽排版
2024 年“泰迪杯”A 题：生产线的故障自动识别与人员配置--第四题（用遗传算法解决生产线排班问题--matlab代码）
最新发布
wodertianna的博客
05-25 2735
使用遗传算法，解决排班问题，优化人力资源配置。
vue 拖拽排序
weixin_47996469的博客
11-18 724
1.vuedraggable 中文文档vuedraggablehttps://www.itxst.com/vue-draggable/tutorial.html vuedraggable组件式封装，并且将可拖动元素放进了transition-group上面，过渡动画都比较好。 //下载 npm i -S vuedraggable //引入 import draggable from 'vuedraggable' //注册 components: { draggable }, //使用 //...
FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班（一）
lanhai96的专栏
08-03 1164
通过一个简单的项目实例，来说明FullCalendar 5.11 日历插件在asp.net上的用法
delphi 简单的医院排班
03-22
1. **文本的拖拽功能**： 在Delphi中，实现文本的拖放操作通常涉及到TDropTarget和TDragSource组件。通过设置控件的DragMode属性为dmAutomatic或dmManual，可以启用拖放功能。同时，需要处理OnDragOver和OnDrop事件...
基于vue的甘特图，可上下拖拽
05-14
标题"基于vue的甘特图，可上下拖拽"表明这个项目的核心在于Vue.js与甘特图的结合，并且重点在于实现了甘特图的任务条上下拖动的功能。这通常意味着用户可以通过鼠标操作直接调整任务的时间安排，使得界面交互更加...
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
这里我们设置了动画效果、拖拽触发的目标、不可拖动的类名以及拖拽过程中的样式类名： ```javascript methods: { initSortable() { const ele = this.$refs.dragTable.$el.querySelector(".el-table__body > ...
排班工具（纯前端实现，使用Tomcat，Nginx直接跑就行）
04-11
排班工具（纯前端实现，使用Tomcat，Nginx直接跑就行），这是一个完整版的纯前端，完全不涉及后台，简单的排班工具，后续会在我的博客里面详细介绍，有问题留言！！
Vue实现简单的拖拽效果
11-19
本文实例为大家分享了Vue实现简单拖拽效果的具体代码，供大家参考，具体内容如下 自定义指令v-drag l 存在时 只能横向拖拽 t 存在时 只能纵向拖拽 lt都存在时 可以任意方向拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>拖拽</t
用于Vuejs的一个可拖动和可调整大小的网格布局
08-10
用于Vue.js的一个可拖动和可调整大小的网格布局
基于 SSM + Vue.js 的排班管理系统
07-13
基于SSM+Vue.js+full-calendar+达梦数据库（国产）实现的排班管理系统，简单的前后端分离demo，包括用户管理，岗位管理，排班管理，值班日志管理，是一个比较完善的web系统
jquery easyui 周历 周选择下拉控件
11-24
基于jquery easyui改造的周选择控件 可指定周起始星期，默认周日为本周的第一天
FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班（三）
lanhai96的专栏
08-03 714
拖拽实现排班功能
【案例】使用Vue实现拖拽课表
qq_45569925的博客
05-14 586
点击左侧的课程并进行拖拽，拖拽到要开设本课程的地方然后松手，即可将本节课设置为当前所拖拽的科目并且背景色为当前科目的背景色，当多次拖拽到同一节课的时候将会实现后者覆盖前者的效果。通过以上代码即可实现展示效果。
element ui 排课_vue怎么去写一个学校排课系统
weixin_39995439的博客
12-23 504
展开全部html>body,html{margin:20px50px;}.title2{color:blueviolet;}.tableth,td{text-align:center;}信息管理系统姓名年龄职位ios工程师h5工程师java工程师UI设计师性别男女添加重置用户信息表序号姓名信息操作操作{{i}}{{item.user}}查看删除修改×详情姓名：{{user}}年...
Sortable拖拽el-table
09-27
Sortable拖拽el-table是通过引入插件Sortable来实现的。在Vue项目中，可以使用npm下载sortablejs插件，并在需要使用的页面引入Sortable。然后，使用Sortable.create方法来实现拖拽排序的功能。具体代码可以参考以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值