Blogger Information
Blog 21
fans 0
comment 0
visits 28421
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js实现手机端在父栏目拖动效果
a张张张浩的博客
Original
859 people have browsed it
<!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

等等。。。

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post