web移动端-实现拖拽的插件 IScroll

逃离我推掉我的手 2022-12-23 06:17 314阅读 0赞

在项目工程中，如果自己手动实现拖拽是比较费时间的，所以使用 IScroll插件可以解决这个问题；  
IScroll插件下载zip后进行解压，在文件夹build里面引入iscroll.js文件，git地址为：  
https://github.com/cubiq/iscroll

核心js为：

let myScroll = new IScroll('.container', { 
    	// 实现鼠标滚轮也可以滑动
    	mouseWheel: true,
    	// 实现手拉拽滑动
    	scrollbars: true
    })

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    	<title>移动端web-iscroll</title>
    	<style> ul { list-style: none; margin: 0; padding: 0 } .container { width: 300px; height: 200px; margin: 100px auto; background: yellow; overflow: hidden; position: relative; } .container ul li { width: 88%; height: 100px; background: red; margin: 0 20px; border-bottom: 1px solid #eee; text-align: center; line-height: 100px; } </style>
    </head>
    <body>
    	
    	<div class="container">
    		<ul>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    		</ul>
    	</div>
    	<script src="iscroll-master/build/iscroll.js"></script>
    	<script> let myScroll = new IScroll('.container', { // 实现鼠标滚轮也可以滑动 mouseWheel: true, // 实现手拉拽滑动 scrollbars: true }) </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular table拖拽插件sortablejs

1、npm 安装 sortablejs npm install sortablejs --save // 只用这一个插件就可以实现拖拽，但是 angular 会报：无法找到

古城微笑少年丶/ 2023年06月19日 02:24/ 0 赞/ 33 阅读

相关拖拽插件vuedraggable的使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5

r囧r小猫/ 2023年06月14日 10:55/ 0 赞/ 29 阅读

相关移动 touch 拖拽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

àì夳堔傛蜴生んèń/ 2023年02月28日 15:22/ 0 赞/ 25 阅读

相关 web移动端-实现拖拽的插件 IScroll

在项目工程中，如果自己手动实现拖拽是比较费时间的，所以使用 IScroll插件可以解决这个问题； IScroll插件下载zip后进行解压，在文件夹build里面引入iscr

逃离我推掉我的手/ 2022年12月23日 06:17/ 0 赞/ 315 阅读

相关 html 手机端拖拽效果,JS实现移动端触屏拖拽功能

1.html 2.css \ \{ margin: 0; padding: 0; \} html, body \{ width: 100%; height:

谁借莪１个温暖的怀抱￠/ 2022年10月06日 11:49/ 0 赞/ 484 阅读

相关 jQuery拖拽移动

jquery sortable 它所有的事件回调函数都有两个参数：event和ui ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的

淡淡的烟草味﹌/ 2022年08月03日 15:52/ 0 赞/ 354 阅读

相关 easyui的dnd插件实现datagrid行拖拽

项目中出现一种需求：对某列表中元素进行手动排序，若使用按钮单击来向上或者向下效率低下，若直接手动输入序号更不科学=.=。因此最好的方式就是能够实现手动拖动某个行到想要的位置

快来打我*/ 2022年08月03日 13:54/ 0 赞/ 429 阅读

相关 javascript拖拽盒子移动的实现

原理比较简单，可以参照之前的文章[javascript淘宝主图放大镜功能][javascript]帮助理解。 <!DOCTYPE html> <html>

刺骨的言语ヽ痛彻心扉/ 2022年07月16日 09:07/ 0 赞/ 312 阅读

相关前端插件之拖拽

1.拖拽的插件很多，其实我们只要明白他的原理，就不难了：之所以形成拖拽的效果，是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界，上边界的距离disX

阳光穿透心脏的1/2处/ 2022年06月09日 08:22/ 0 赞/ 575 阅读

相关 pc端移动端拖拽实现

div1 { width: 100px; height: 100px; background: red; positio

曾经终败给现在/ 2021年12月21日 23:47/ 0 赞/ 594 阅读