interactjs

使用JavaScript实现拖放、缩放和多点触控手势
InteractJS是一个JavaScript模块，它为最新的浏览器（包括IE8以上版本）增加了拖放、缩放和多点触控手势，并带有惯性和快照功能。
这个库的主要目的是替换jQuery UI所提供的功能。 因此，使用InteractJS来编写的web应用在智能手机和平板上会更加易用。 InteractJS是一个轻量级的库，可以与SVG技术协作，处理多点触控输入，而把渲染元素以及设置其样式的任务留给了应用程序。

官网：https://interactjs.io/

实例: 为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">&times;</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)