Sortable.js拖拽排序插件拖拽的时候不能滚动页面问题

最新推荐文章于 2023-07-16 23:23:27 发布
最新推荐文章于 2023-07-16 23:23:27 发布
阅读量3.6k 收藏 3
点赞数 4
分类专栏： 问题解决 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MrHao_/article/details/108080295
版权

github地址：https://github.com/SortableJS/Sortable#readme

用线上地址js是正常的，当我把线上js复制到本地的时候发现，拖拽的时候不能滚动。


forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

把这个属性改为true就可以了。

SortableJS还是比较好用的插件，拖拽的时候比较丝滑，jquery也有一个拖拽插件，拖拽后滚动，盒子都丢了

 

MrHao_
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
关于sortable的在有滚动轮情况下的拖拽问题
smallITAA的博客
12-11 1751
关于sortable的在有滚动轮情况下的拖拽问题 下面展示一些图片。 蓝色区域的tbody是拖拽区域，当两个拖拽区域不需要滚动时(相当于在同一页面能够显示)这时候能够正常拖拽 蓝色区域的tbody是拖拽区域，当两个拖拽区域需要滚动时(相当于不在同一页面能够显示)这时候拖拽便没有反应. 在网上百度和google都找了一下发现有许多解决办法 下面展示一些 解决代码。 产生此现象的原因应该是滚动时候影响到了item的坐标 这个方法表示滚动框滚动时重新去刷新item的坐标 第一种方法 sortdata
vue 虚拟滚动vue-virtual-scroll-list+拖拽sortablejs
webhejian的博客
02-22 988
虚拟滚动+拖拽实现列表重排
拖拽排序插件Sortable.js在拖动的时候不能滑动鼠标滚轮滚动屏幕的问题
wb121017405的博客
08-03 4499
只是一个小问题 在使用sortable.js的时候遇到拖动的时候不能滑动鼠标滚轮控制滚动条，找了很多地方，也看了文档，原来是没有找到那个点： forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in 就这样一个属性，具体什么也不太清楚，加上去了之后拖动的元素就不能离开浏...
Vue.Draggable学习笔记
qq_095的博客
08-27 698
options：Object，配置项,就是sortable.js的props group：string or object string：group="people" 命名，个人建议用元素id就行,用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍； object：{name,pull,put} :group="{ name: 'people', pull: 'cl...
JQuery UI - sortable
D!eR 个人博客
12-13 4995
·概述Selectable插件允许用户对指定的元素进行选中的动作。此外还支持按住Ctrl键单击或拖拽选择多个元素。官方示例地址：http://jqueryui.com/demos/sortable/所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克
vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案
最新发布
EchoLiner的博客
07-16 3000
项目使用element ui 的表格实现拖动表头可改变列的宽度，又使用sortablejs实现表格的列可拖拽到其他列的位置，导致出现如下的一些问题： 1、某一列宽变大或变小后，只有当前列可拖拽，其他列无法拖拽。 解决方案：在列宽发生改变后，销毁当前拖拽实例，再重新创建拖拽实例。 this.sortDemo.destroy() 2、当表格没有横向滚动条时，某一列宽变大或变小时，其他列宽也会变大或变小。 根因：表格的列不够多，不足以撑开表格的整体宽度。 结论：当表格没有横向滚动条时，拉宽某一列，表
JS拖拽排序插件Sortable.js用法实例分析
01-19
本文实例讲述了JS拖拽排序插件Sortable.js用法。分享给大家供大家参考，具体如下： 最近由于项目功能设计的原因，需要对table中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源...
jquery div拖动排序效果代码.zip
07-04
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...
多列拖拽排序智能滚动
01-16
"多列拖拽排序智能滚动"是一种提升用户体验的技术，它允许用户通过拖放操作对多列数据进行排序，同时在拖动过程中，如果接近屏幕边缘，页面会自动滚动，确保用户能持续看到可操作区域。这个功能的实现主要依赖于...
JS实现图片拖拽排序（亲测可用）
03-07
同时，确保插件在新图片加载后能正确地应用拖拽排序功能。可以使用`append`或`prepend`方法添加元素，然后再次调用`imageDragSort()`。 ```javascript $.ajax({ url: 'your-api-url', type: 'GET', success: ...
瀑布流插件带拖拽排序
06-01
综上所述，这个压缩包包含了一个基于Bootstrap的瀑布流插件，具备拖拽排序功能，适用于创建用户友好的、可自定义排序的图片或内容展示页面。开发者可以通过分析`index.html`和`js`文件夹中的代码，学习如何集成和...
Vue3、el-table、sortablejs实现行拖动时出现的问题和解决方案
qq_33474979的博客
02-15 2678
Vue3、el-table、sortablejs实现行拖动时出现的问题和解决方案初始化出现的问题解决方案 初始化 插件引入参考其他文章 <div class="header-set-main"> <el-table :data="dictList" show-overflow-tooltip height="450" highlight-current-row ref="di
sortablejs插件在el-table中的运用
qq_50661854的博客
05-11 4492
sortablejs插件在el-table中的运用 概述需求 有一个Table表格，由于数据是根据自增的ID进行排序显示的，有时了调整顺序会在数据库中直接操作数据表，来达到调整数据顺序的目的，因为为了实现在页面实现较为简单的拖拽排序，因此展开讨论。 最后sortablejs插件可以满足需求并可以快捷的实现功能。 参看资料： 官网：http://www.sortablejs.com/ 中文文档：https://www.itxst.com/sortablejs/neuinffi.html 1、安装sorta
前端使用Sortable拖拽排序插件,里面的input.textarea光标无法移动的解决
dongyan3595的博客
11-26 1258
var sort = Sortable.create(container, { animation: 500, // ms, animation speed moving items when sorting, `0` — without animation handle: ".upload-goods-sort", // Restricts sort start click/touch to the specified element draggable: ".upload-g.
vue2中使用sortablejs
x94664986的博客
03-28 2311
vue2使用sortable.js进行排序
Sortable.js拖放排序JavaScript库
热门推荐
樊小书生
09-08 2万+
本文仅做翻译记录查看，GitHub原项目地址： https://github.com/RubaXa/Sortable/ ，建议将Sortable.js下载到本地，GitHub上的例子在复制到本地运行，在 http://jsbin.com 上运行很多时候会报Sortable is not defined 的错误。 Sortable.js是用于在现代浏览器和触摸设备上重新拖放排序列表的JavaSc...
解决：使用sortablejs库对el-table设置拖拽，但拖拽一直不生效。
qq_38969618的博客
04-12 7658
问题原因：我安装错了库名！！！我直接在npm上搜，看到第一个显示的sortable.js，就直接错误安装npm install --save sortable.js，导致在我的vue+ts项目某个el-dialog页面使用时，拖拽一直不起作用。实际正确的应该是：sortablejs, 正确的库名是没有小数点分隔。 正确使用如下： 第一步：先安装插件 npm install sortablejs --save 第二步：在页面中引入插件&使用即可。 // demo.vue <tem
sortablejs 列表拖拽后刷新保持上次拖动
weixin_43440893的博客
01-22 1593
sortablejs 列表拖拽后刷新保持上次拖动。
Sortable.js拖动移动行位置，数据随之调整
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-22 886
【代码】JS拖动移动行位置，数据随拖动调整。
sortable.js 拖动排序结果通过保存按钮发送后台
03-27
要使用 sortable.js 来实现拖动排序，并将排序结果发送到后台，您需要遵循以下步骤： 1. 引入 sortable.js 库 在页面中引入 sortable.js 库，可以从官方网站下载或使用 CDN。 2. 创建可排序的列表 使用 HTML 和 CSS 创建可排序的列表。在每个列表项中添加一个唯一的标识符，以便在排序后将其发送到后台。 3. 初始化 sortable.js 在 JavaScript 中初始化 sortable.js。使用 onEnd 回调函数来捕获排序事件，并获取排序结果。 4. 将结果发送到后台 在 onEnd 回调函数中，将排序结果发送到后台。您可以使用 AJAX 或其他方法来完成此操作。 以下是示例代码： HTML： ``` <ul id="sortable"> <li data-id="1">Item 1</li> <li data-id="2">Item 2</li> <li data-id="3">Item 3</li> <li data-id="4">Item 4</li> </ul> <button id="save">Save</button> ``` JavaScript： ``` // 初始化 sortable.js var sortable = Sortable.create(document.getElementById('sortable'), { onEnd: function (evt) { // 获取排序结果 var items = sortable.toArray(); // 将结果发送到后台 $.ajax({ url: '/save', type: 'post', data: { items: items }, success: function (response) { console.log(response); } }); } }); // 保存按钮点击事件 $('#save').click(function () { // 获取排序结果 var items = sortable.toArray(); // 将结果发送到后台 $.ajax({ url: '/save', type: 'post', data: { items: items }, success: function (response) { console.log(response); } }); }); ``` 在上面的示例代码中，我们使用 jQuery 的 AJAX 方法将排序结果作为 POST 请求发送到 /save 路径。您需要根据自己的需求更改此代码以适应您的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MrHao_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值