Touch Punch在移动设备上面增加jQuery UI的触摸支持 JQuery UI 支持移动端触摸滑动等

web网页精选

于 2024-04-24 10:20:32 发布

阅读量474

点赞数 5

文章标签： jquery ui 前端

本文链接：https://blog.csdn.net/qq_43770056/article/details/138151147

版权

jQuery UI是我们前台开发常用的UI前端类库，但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件。这意味着你在桌面上设计的优雅的UI可能在触摸设备，例如，ipad，iphone和 Android上并不能正常工作。因为jQuery UI监听的是mouseover，mousemove和mouseout事件，不是触摸事件，touchstart，touchmove和 touched。

为了解决这个问题，这里我们介绍jQuery UI Touch Punch类库，它通过模拟事件来将鼠标事件匹配touch事件。你只需要简单的添加相关类库即可。非常简答，容易使用。

设备支持

jQuery UI Touch Punch能完美的兼容以下设备的触摸事件。

iPad
iPhone
Android
其它基于触摸的移动设备

使用方法

继续简单的几个步骤就可以实现在移动设备上的触摸事件。

1、引入jQuery和jQuery ui插件库文件

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

2、引入 jQuery UI Touch Punch类库

注意：在引入 jQuery UI Touch Punch类库的时候，一定要放置在jQuery UI的后面，第一次调用jQuery UI的前面，这样这个插件才能生效。

<script src="jquery.ui.touch-punch.min.js"></script>

3、此时我们已经引用了jQuery UI Touch Punch插件，所以只需要按照jQuery UI的方法调用，会自动在移动设备上支持触摸事件。

<script>$('#widget').draggable();</script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./static/js/jquery-3.6.0.min.js"></script>
    <script src="./static/js/jquery-ui.js"></script>
    <script src="./static/js/jquery.ui.touch-punch.min.js"></script>
    <link rel="stylesheet" href="./static/css/styles.css" />
</head>

<body>
    <div class="container">
        <div class="float-layer">

        </div>

        <div class="complated-layer">

        </div>
    </div>

    <script>
        $(function () {
            let restartFn = () => {

                let stepItemPostion = [
                    { left: "3.23%", top: "13.89%" },
                    { left: "23.06%", top: "13.89%" },
                    { left: "41.96%", top: "13.89%" },
                    { left: "61.78%", top: "13.89%" },
                    { left: "80.69%", top: "13.89%" },
                ]

                //1~12随机排序后的数组 生成12个div 同时设置背景图为resource中对应的png
                let randomArray = [1, 2, 3, 4, 5].sort(function () { return 0.5 - Math.random() });
                for (let index = 1; index <= stepItemPostion.length; index++) {
                    $(".float-layer").append(`<div class="draggable" id="item-${randomArray[index - 1]}" style="left:${stepItemPostion[index - 1].left};top:${stepItemPostion[index - 1].top}"  o-left="${stepItemPostion[index - 1].left}" o-top="${stepItemPostion[index - 1].top}"></div>`);
                    $(`#item-${randomArray[index - 1]}`).css({ "background-image": `url(static/images/${randomArray[index - 1]}.png)`, "background-size": "cover" });

                    $(`#item-${randomArray[index - 1]}`).draggable();
                }

                //在.draggable拖动的时候将z-index设置到5
                $(".draggable").on("dragstart", function (event, ui) {
                    $(this).css("z-index", "25");
                });

                //在.draggable拖动结束的时候将z-index设置到1
                $(".draggable").on("dragstop", function (event, ui) {
                    $(this).css("z-index", "1");
                });

                $(".draggable").draggable({
                    revert: "invalid", // 将拖动的元素还原到原始位置，如果未被放置到目标区域
                    cursor: "move",
                });
            }

            restartFn();
        });
    </script>
</body>

</html>