【油猴脚本】00004案例 Tampermonkey油猴脚本引入js库，使表格可以拖拽移动

news2024/11/17 9:37:41

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
csdngif标识

【油猴脚本】00004案例 Tampermonkey油猴脚本引入js库，使表格可以拖拽移动

📚一、效果

📚二、核心解析

💡1.引入js库：

引入jquery.easyui.min.js库

jQuery版EasyUI中文网：👉 https://www.jeasyui.cn/document/index/index.html
菜鸟教程：👉 https://www.runoob.com/jeasyui/jqueryeasyui-intro.html

// @require      https://www.jeasyui.com/easyui/jquery.easyui.min.js

💡2.使用拖拽方法：

$('.table-card').draggable({
    handle:'#draggableArea'
  })

📚三、完整源代码，可以直接复制使用

✍️JavaScript

// ==UserScript==
// @name         表格可拖拽
// @namespace    http://tampermonkey.net/
// @version      2024-09-12
// @description  一个简单的油猴脚本
// @author       CSDN@宝码香车
// @match        https://developer.mozilla.org/zh-CN/
// @resource bootstrapCss https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css
// @require      https://code.jquery.com/jquery-1.9.1.min.js
// @require      https://www.jeasyui.com/easyui/jquery.easyui.min.js
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @run-at       document-end
// ==/UserScript==


(function () {
  'use strict';

  let tableHtml = `
    <div class="col-md-8 table-card" style="padding:1em;">
     <div id="draggableArea">拖拽这里移动表格</div>
     <div class="table-responsive">
      <table class="table table-bordered table-striped" id="test_table">
       <thead>
        <tr>
         <td>序号</td>
         <td>姓名</td>
         <td>省份</td>
         <td>城市</td>
         <td>性别</td>
         <td>职业</td>
         <td>年龄</td>
        </tr>
       </thead>
       <tbody><tr><td>1</td><td>杨柳柳</td><td>四川</td><td>成都</td><td>男</td><td>学生</td><td>16</td></tr><tr><td>2</td><td>秦晓</td><td>四川</td><td>江油</td><td>男</td><td>学生</td><td>22</td></tr><tr><td>3</td><td>宇峰</td><td>XX</td><td>重庆</td><td>女</td><td>银行职员</td><td>24</td></tr><tr><td>4</td><td>青玉</td><td>河北</td><td>石家庄</td><td>男</td><td>java工程师</td><td>21</td></tr></tbody>
      </table>
     </div>
    </div>
    `
  let cssMore = `
  #draggableArea{padding:10px;background:#f5f5f5;}
   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:100;
    background:#fff;
    box-shadow: 0px 0px 0 10px #E95C8A;
   }
  `
  let bsCss = GM_getResourceText('bootstrapCss')
  GM_addStyle(bsCss)
  GM_addStyle(cssMore)
  $('body').append(tableHtml)
  $('.table-card').draggable({
    handle:'#draggableArea'
  })





  // Your code here...
})();

📚四、使用此代码

1.浏览器打开https://developer.mozilla.org/zh-CN/
2.把代码复制进油猴脚本，打开运行开关，刷新页面

安装教程：👉 https://blog.csdn.net/qq_33650655/article/details/142097760
使用教程：👉 https://blog.csdn.net/qq_33650655/article/details/142183047