js实现手机端在父栏目拖动效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>首页</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.js"></script>
 <script>
  $(function() {
    $( "#draggable5" ).draggable({ containment: "parent" });
  });
  </script>
<body>
<div class="container">
	 <img id="draggable5" class="ui-img" src="a.png">我被约束在父元素内</p>
</div>
</body>
</html>

这是我自己总结出来的，详细的知识参考jqueryUI文档，默认的jQueryUI的拖动是不支持手机端的，不信你可以试试

然而你加上这个插件就完美支持手机端了，名叫jquery.ui.touch-punch.js

这个是https://github.com/furf/jquery-ui-touch-punch

另外手机端效果还有touch.js

多点触控插件https://github.com/hammerjs/hammer.js

jQuery Mobile

jQuery Mobile 是创建移动 web 应用程序的框架。

jQuery Mobile 适用于所有流行的智能手机和平板电脑。

jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

and div截屏成图片的html2canvas

等等。。。

相关文章