【油猴脚本】00020 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加不可移动到窗口外的功能。Jquery爬虫，JavaScript爬虫HTML+Css+JavaScript编写

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

目录

• 【油猴脚本】00020 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加不可移动到窗口外的功能。把easyui库更换为JqueryUi库，JqueryUi学习性更好。jqueryui的Draggable组件的bug发现以及解决,Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写
• 使用的库：
• • Bootstrap的Css库CDN:
  • Jquery库CDN：
  • sheetjs库CDN：
  • Jquery的库JqueryUi CDN：
• ??一、效果
• ??二、核心解析
• • ??1.jqueryui库的引入：
  • ??2.jqueryui的Draggable组件的bug发现以及解决：
  • ??3.添加 - 不可移动到窗口外的功能：
• ??三、完整源代码，可以直接复制使用
• • ??JavaScript
• ??四、使用此代码的方法：

---

???·正文开始·??? ??0123456789???*#

【油猴脚本】00020 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加不可移动到窗口外的功能。把easyui库更换为JqueryUi库，JqueryUi学习性更好。jqueryui的Draggable组件的bug发现以及解决,Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写

使用的库：

Bootstrap的Css库CDN:

https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css

Jquery库CDN：

 https://code.jquery.com/jquery-1.9.1.min.js

sheetjs库CDN：

 https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js

Jquery的库JqueryUi CDN：

https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js

??一、效果

添加-不可移动到窗口外的功能

---

??二、核心解析

??1.jqueryui库的引入：

// @require      https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js

??2.jqueryui的Draggable组件的bug发现以及解决：

原拖拽的handle控件是button,而jqueryui中button不能被当做拖拽组件的handle，因此改变button为div

 <div id="draggableArea" class="draggableBtn btn btn-default">拖拽这里移动位置</div>

添加拖拽的handle的css鼠标样式

 #draggableArea{
    cursor:move;
}

??3.添加 - 不可移动到窗口外的功能：

添加draggable的参数containment为window

  $('.table-card').draggable({
    handle: '#draggableArea',
    containment:"window"
  })

---

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

JavaScript

// ==UserScript==
// @name         添加 - 不可移动到窗口外的功能
// @namespace    http://tampermonkey.net/
// @version      2024-09-12
// @description  动态渲染表格
// @author       CSDN@
// @match        https://developer.mozilla.org/zh-CN/
// @match        https://www.zhipin.com/web/geek/job?city=100010000
// @resource bootstrapCss https://apps.bdimg.com/libs/bootstrap/3.3.4/