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

逃离我推掉我的手 2022-12-23 06:17 236阅读 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 条评论，236人围观）

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

相关阅读

相关拖拽改变div大小（兼容移动端）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm

朴灿烈づ我的快乐病毒、/ 2023年07月24日 02:24/ 0 赞/ 19 阅读

相关 JS拖拽div（移动）

//获取元素 var dv = document.getElementById('dv'); var x = 0; var y = 0; var l = 0;

素颜马尾好姑娘i/ 2023年06月30日 02:20/ 0 赞/ 60 阅读

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

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

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

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

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

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

相关 jQuery拖拽移动

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

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

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

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

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

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

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

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

相关前端插件之拖拽

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

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

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 318 阅读

相关 pc端移动端拖拽实现

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

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