收藏
<!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
等等。。。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
