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

所属分类:输入-拖和放

 18372  202  查看评论 (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();
相关插件-拖和放

Sortable – 简单灵活的 JavaScript 拖放排序插件

Sortable 简单灵活的 JavaScript 拖放排序插件
  拖和放
 102192  446

jquery 拖动复制

jquery拖动div复制到表格
  拖和放
 44548  451

jQuery移动端滑动标尺

移动端卡尺,滑动标尺,标不动
  拖和放
 24204  319

拖放交互的想法

在UI中拖放交互的一些想法,这个想法是显示一个可拖拽的区域,代表一个元素被拖拽后的某些动作。
  拖和放
 25646  344

讨论这个项目(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
    这个不错,有点像技术论坛里的代码板块,水平拖拽比较实用,而且无感知滚动条 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复