jquery實現(xiàn)移動端懸浮拖拽框

更新時間：2022年02月23日 10:50:46 作者：暖初??

這篇文章主要為大家詳細介紹了jquery實現(xiàn)移動端懸浮拖拽框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用jquery 實現(xiàn)了一個基礎的懸浮彈拖拽窗, 根據(jù)自己的需求去完善動效。分享給大家供大家參考，具體如下：

演示效果

代碼塊

需要引入jquery , 引入本地或線上根據(jù)自己的情況修改

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

<head>
? <meta charset="UTF-8">
? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>移動端 拖拽按鈕</title>
? <link rel="stylesheet" href="./static/css/base.css">
? <link rel="stylesheet" href="./static/css/index.css">

? <!-- js -->
? <script src="./static/js/jquery-3.5.1.js"></script>
</head>

<body>
? <div class="main">
? ? <div class="circle-box" ontouchmove="touchMove(event)" ontouchend="touchEnd()">
? ? ? <div class="circle"></div>
? ? </div>
? </div>

</body>

</html>

<script>
? var startX = 0;
? var startY = 0;
? $(function () {
? ? ? $('.circle-box').on('touchstart', function (event) {
? ? ? ? var element = event.targetTouches[0];
? ? ? ? // 初始化位置
? ? ? ? startX = element.pageX - this.offsetLeft;
? ? ? ? startY = element.pageY - this.offsetTop;
? ? ? ? console.log(startX, startY);
? ? ? ? return false
? ? ? })
? })
? function touchMove(event) {
?? ? ?var element = event.targetTouches[0];
?? ? ?var x = element.clientX - startX;
?? ? ?var y = element.clientY - startY;
?? ? ?parentWidth = $('.main').innerWidth();
?? ? ?parentHeight = $('.main').innerHeight();

?? ? ?// 設置 上邊界
?? ? ?if (y <= 0) {
?? ? ? ?y = 1;
?? ? ?}
?? ? ?
?? ? ?// 設置 下邊界 40: 移動框自身寬度
?? ? ?if (y >= parentHeight - 40) {
?? ? ? ?x = parentHeight - 40 - 1;
?? ? ?}
?? ?
?? ? ?// 設置 左邊界
?? ? ?if (x <= 0) {
?? ? ? ?x = 1;
?? ? ?}

?? ? ?// 設置 右邊界 40: 移動框自身寬度
?? ? ?if (x >= parentWidth - 40) {
?? ? ? ?x = parentWidth - 40 - 1;
?? ? ?}
?? ?
?? ? ?$('.circle-box').css({
?? ? ? ?'left': x + 'px',
?? ? ? ?'top': y + 'px'
?? ? ?})
?? ?
?? ? ?return false
}

function touchEnd(event) {
? $('.main').unbind('mousemove')
? $('.main').unbind('mouseup')
}
</script>

CSS

基礎css 根據(jù)自己需求修改

.main {
? position: relative;
? overflow: hidden;
? width: 100vw;
? height: 100vh;
? background: pink;
? padding: 1px;
? box-sizing: border-box;
}
.circle-box {
? position: absolute;
? top: 200px;
? bottom: 0;
/* 如果初始化設置right, 需先隱藏left, left級別大于right*/
? /* left: 0; */
? right: 1px;
? width: 40px;
? height: 40px;
? line-height: 40px;
? border-radius: 50%;
? background-color: transparent;
? display: flex;
? justify-content: center;
? align-items: center;
? box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
? z-index: 999;
}
.circle-box .circle {
? width: 30px;
? height: 30px;
? border-radius: 50%;
? box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
? background-color: #fff;
? opacity: 0.5;

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: