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

最新推荐文章于 2024-05-13 18:03:26 发布
最新推荐文章于 2024-05-13 18:03:26 发布
阅读量3.8k 收藏 4
点赞数 6
分类专栏： 问题解决 文章标签： 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_
关注
专栏目录
关于sortable的在有滚动轮情况下的拖拽问题
smallITAA的博客
12-11 1893
关于sortable的在有滚动轮情况下的拖拽问题 下面展示一些图片。 蓝色区域的tbody是拖拽区域，当两个拖拽区域不需要滚动时(相当于在同一页面能够显示)这时候能够正常拖拽 蓝色区域的tbody是拖拽区域，当两个拖拽区域需要滚动时(相当于不在同一页面能够显示)这时候拖拽便没有反应. 在网上百度和google都找了一下发现有许多解决办法 下面展示一些 解决代码。 产生此现象的原因应该是滚动时候影响到了item的坐标 这个方法表示滚动框滚动时重新去刷新item的坐标 第一种方法 sortdata
vue 虚拟滚动vue-virtual-scroll-list+拖拽sortablejs
webhejian的博客
02-22 1130
虚拟滚动+拖拽实现列表重排
拖拽排序插件Sortable.js在拖动的时候不能滑动鼠标滚轮滚动屏幕的问题
wb121017405的博客
08-03 4633
只是一个小问题 在使用sortable.js的时候遇到拖动的时候不能滑动鼠标滚轮控制滚动条，找了很多地方，也看了文档，原来是没有找到那个点： forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in 就这样一个属性，具体什么也不太清楚，加上去了之后拖动的元素就不能离开浏...
react-grid-layout 拖拽元素时滚动条不能跟随
weixin_43170484的博客
10-18 738
在使用react-grid-layout拖拽元素时出现了滚动条不能跟随拖拽元素滚动的问题，在百度和google上都没有搜索到原因，后经过和官方案例的debug，发现是样式多了一个user-selector:none 属性造成的
关于Vue3+ element-plus中使用sortablejs做表格拖动遇到的坑,以及表格新增后滚动至底部
最新发布
m244142的博客
05-13 540
表单拖动,表格滚动底部
JQuery UI - sortable
D!eR 个人博客
12-13 5050
·概述Selectable插件允许用户对指定的元素进行选中的动作。此外还支持按住Ctrl键单击或拖拽选择多个元素。官方示例地址：http://jqueryui.com/demos/sortable/所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
weixin_36325338的博客
06-16 834
本文实例讲述了JS拖拽排序插件Sortable.js用法。分享给大家供大家参考，具体如下：最近由于项目功能设计的原因，需要对table中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js，再然后就有了这篇文章。特点：轻量级但功能强大移动列表项时有动画支持触屏设备和大多数浏览器(IE9及以下除外)支持单个列表容器...
Sortable.js 拖放排序插件
kangkang_style的博客
03-26 1623
Sortable.js是一款轻量级的拖放排序列表的js插件 1. 安装 $ npm install sortablejs --save 2. 使用 定位到需要排序的对象，创建Sortable对象并添加响应配置设置 可以通过方法： var sortable = Sortable.create(el,{}) 或者 var sortable = new Sortable(el,...
关于拖拽插件sortable.js火狐浏览器兼容性
web_qdkf的博客
12-28 2586
解决sortable.js兼容性低版本火狐输入框、文本域无法输入内容 $("input,textarea").click(function() { $(this).focus(); });
Sortable.js拖动移动行位置，数据随之调整
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-22 1022
【代码】JS拖动移动行位置，数据随拖动调整。
Vue.Draggable学习笔记
qq_095的博客
08-27 755
options：Object，配置项,就是sortable.js的props group：string or object string：group="people" 命名，个人建议用元素id就行,用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍； object：{name,pull,put} :group="{ name: 'people', pull: 'cl...
vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案
EchoLiner的博客
07-16 3358
项目使用element ui 的表格实现拖动表头可改变列的宽度，又使用sortablejs实现表格的列可拖拽到其他列的位置，导致出现如下的一些问题： 1、某一列宽变大或变小后，只有当前列可拖拽，其他列无法拖拽。 解决方案：在列宽发生改变后，销毁当前拖拽实例，再重新创建拖拽实例。 this.sortDemo.destroy() 2、当表格没有横向滚动条时，某一列宽变大或变小时，其他列宽也会变大或变小。 根因：表格的列不够多，不足以撑开表格的整体宽度。 结论：当表格没有横向滚动条时，拉宽某一列，表
Vue3、el-table、sortablejs实现行拖动时出现的问题和解决方案
qq_33474979的博客
02-15 2846
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 4797
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 1389
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 2598
vue2使用sortable.js进行排序
Sortable.js：功能强大的JavaScript 拖拽库
流绪@微梦
01-08 9098
Sortable.js：功能强大的JavaScript 拖拽库
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

MrHao_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值