jquery实现移动端悬浮拖拽框
使用jquery 实现了一个基础的悬浮弹拖拽窗, 根据自己的需求去完善动效。 分享给大家供大家参考，具体如下：
演示效果
代码块
需要引入jquery , 引入本地或线上根据自己的情况修改
<!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 根据自己需求修改
.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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery悬浮提示框完整实例
本文实例讲述了jquery悬浮提示框实现方法.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { x = 5; y = 15; $("p").hover
-
jQuery实现首页悬浮框
本文实例为大家分享了jQuery实现首页悬浮框的具体代码,供大家参考,具体内容如下 基于jQuery实现首页悬浮框,如下图所示 1.在页面中引入jQuery.bay-window.js,jQuery.bay-window.js的代码如下: !function($){ /** * Description: jquery飘窗插件,可自适应浏览器宽高的变化 * Author: ddqre12345 * CreateTime: 2017.5.3 * param: args={
-
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha
-
jquery实现鼠标悬浮弹出气泡提示框
jquery鼠标悬浮弹出气泡提示框,供大家参考,具体内容如下 居中的图片 代码 我在网上找了很多例子都是单独的一个,所以我修改了jquery的一点代码,让它可以在一个页面上多次使用,原文的地址我没找到,相信我这个会更好一点. //别忘了导入js文件! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>气泡显示</title> <script
-
jquery实现移动端悬浮拖拽框
使用jquery 实现了一个基础的悬浮弹拖拽窗, 根据自己的需求去完善动效. 分享给大家供大家参考,具体如下: 演示效果 代码块 需要引入jquery , 引入本地或线上根据自己的情况修改 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c
-
vue实现移动端可拖拽式icon图标
本文实例为大家分享了vue实现移动端可拖拽式icon图标的具体代码,供大家参考,具体内容如下 需求描述:在移动端页面悬浮一个可随便拖拽的图标,类似于苹果手机的辅助触控小圆点,并且可随意拖动. 预览: 组件代码如下: <template> <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':to
-
Javascript基于jQuery UI实现选中区域拖拽效果
一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script
-
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d
-
JS实现简单移动端鼠标拖拽
本文实例为大家分享了JS实现移动端鼠标拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
-
typescript+react实现移动端和PC端简单拖拽效果
本文实例为大家分享了typescript+react实现移动端和PC端简单拖拽效果的具体代码,供大家参考,具体内容如下 一.移动端 1.tsx代码 import { Component } from "react"; import './Tab.less' interface Props { } interface user { id: string, text: string } interface content { id: string, text: string } inter
-
Vue使用vue-drag-resize生成悬浮拖拽小球
本文实例为大家分享了使用vue-drag-resize生成悬浮拖拽小球的具体代码,供大家参考,具体内容如下 一.下载依赖 cnpm install vue-drag-resize 二.main.js引用 import VueDragResize from 'vue-drag-resize' Vue.component('vue-drag-resize', VueDragResize) 三.创建组件 <template> <vue-drag-resize id="moreM
-
vue实现移动端touch拖拽排序
目录 功能介绍: 大致需求: 整体思路: 简单效果展示: 具体实现: 一.display:flex+v-for布局: 二.touch事件绑定: 三.卡片移动: 四.获取手指所在位置: 五.操作数组(删除或插入元素): 六.手指离开屏幕: 七.备注: 八.完整代码: 本文实例为大家分享了vue实现移动端touch拖拽排序的具体代码,供大家参考,具体内容如下 功能介绍: 在移动端开发中,希望实现类似支付宝应用管理页面的可拖拽排序交互. 大致需求: 1.卡片按照一定顺序排序,超出横向范围换行显示:2.
-
jQuery表格列宽可拖拽改变且兼容firfox
本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
-
Jquery UI实现一次拖拽多个选中的元素操作
项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在实际的操作中,遇到个很多的问题,说明一下,最后附上效果图和代码. 1.本人使用的bootstrap框架,引入jquery-ui后,为元素添加拖拽方法后,提示该方法不是一个函数.查找原因,是bootstrap和jquery-uide的$ 标识符控制权冲突.在引入的jquery-ui的js前加上一下语句