兼容PC和移动端的jQuery拖拽插件dragscroll.js

所属分类:输入-拖和放

 14694  178  查看评论 (4)
分享到微信朋友圈
X
兼容PC和移动端的jQuery拖拽插件dragscroll.js ie兼容6

更新时间:2019-08-17 00:29:39

更新说明:新增拖动开始、拖动中、拖动结束后三个回调函数

$('.drag').dragscroll({
    onStart: function($this) {
        console.log($this);
    },
    onMove: function($this) {
        console.log($this);
    },
    onEnd: function($this) {
        console.log($this);
    }
});

更新时间:2019-08-12 23:56:29

dragscroll.js

兼容PC和移动端拖拽滚动jQuery插件

使用方法

需要调用jquery库和jquery.dragscroll.js

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.dragscroll.js"></script>

html

<div class="drag-box">
    <div class="drag">
        jQuery是一个快速、简洁的JavaScript框架......
    </div>
</div>

css

.drag-box {
	width:400px;
	height:200px;
	margin:20px auto;
	overflow:hidden;
	border:1px solid #e8e8e8;
	background:#f8f8f8;
	line-height:25px;
	font-size:14px;
}
.drag {
	width:150%;
	padding:10px;
	cursor:grab;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	-khtml-user-select:none;
	user-select:none;
}

js

 $('.drag').dragscroll();
相关插件-拖和放

图标拖拽效果,兼容所有浏览器

原生JS实现图标图片拖拽,封装好了,可以直接拿去使用
  拖和放
 34424  344

jQuery自由拖曳照片插件

可自由拖曳照片,并展现文字和内容
  拖和放
 23635  302

jquery拖动排序插件Nestable

jquery拖动排序插件Nestable
  拖和放
 79548  444

jQuery拖动滑块选择数字插件sider.jquery.js

通过拖动滑块快速输入数值,并可以设置常用的数值快速选择
  拖和放
 24253  295

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    白天 0
    2020/11/11 10:10:50
    为什么我从git上面下载下来的源码不能拖拽呀? 回复
    涛陪理对 0
    2019/8/14 10:34:17
    移动端,体验还有点问题,拖动时,整个页面都会动,不知道哪位大佬有解决办法没有
        灭霸媳妇0
        2019/8/14 11:24:17
        这是因为你页面外框超出了手机屏幕,因该不是这个插件引起的,你可以单独调用此插件在不超出屏幕宽度的情况下测试一下,看是不是还会影响到整个页面的拖动。
    回复
    SiriBen 0
    2019/8/13 9:36:05
    这个不错,有点像技术论坛里的代码板块,水平拖拽比较实用,而且无感知滚动条 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复