interactjs 使用JavaScript实现拖放、缩放和多点触控手势
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了interactjs 使用JavaScript实现拖放、缩放和多点触控手势，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2237字，纯文字阅读大概需要4分钟。
内容图文
interactjs
使用JavaScript实现拖放、缩放和多点触控手势
InteractJS是一个JavaScript模块，它为最新的浏览器（包括IE8以上版本）增加了拖放、缩放和多点触控手势，并带有惯性和快照功能。
这个库的主要目的是替换jQuery UI所提供的功能。 因此，使用InteractJS来编写的web应用在智能手机和平板上会更加易用。 InteractJS是一个轻量级的库，可以与SVG技术协作，处理多点触控输入，而把渲染元素以及设置其样式的任务留给了应用程序。
实例: 为Bootstrap Modal（模态框）全局添加拖拽操作
html部分
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
</div>
</div>
bootstrap modal 的events:
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.modal | 在调用 show 方法后触发 | $(’#modal’).on(‘show.bs.modal’, function(){执行一些操作}) |
| shown.bs.modal | 当模态框对用户可见时触发（将等待 CSS 过渡效果完成） | $(’#modal’).on(‘shown.bs.modal’, function(){执行一些操作}) |
| hide.bs.modal | 当调用 hide 实例方法时触发 | $(’#modal’).on(‘hide.bs.modal’, function(){执行一些操作}) |
| hidden.bs.modal | 当模态框完全对用户隐藏时触发 | $(’#modal’).on(‘hidden.bs.modal’, function(){执行一些操作}) |
js部分
$('.modal').on('shown.bs.modal', _handleShowModal)
_handleShowModal = () ->
interact('.modal-dialog').draggable
restrict:
restriction: "parent"
endOnly: true
# elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
onmove: _dragMoveListener
_dragMoveListener = (event) ->
target = event.target
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
target.style.webkitTransform = target.style.transform = "translate(#{x}px, #{y}px)"
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
内容总结
以上是互联网集市为您收集整理的interactjs 使用JavaScript实现拖放、缩放和多点触控手势全部内容，希望文章能够帮你解决interactjs 使用JavaScript实现拖放、缩放和多点触控手势所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。