有事没事搞个图：

demo：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">

<title>九宫格</title>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<style>

html,body{

      margin: 0;

      padding: 0;

      height: 98%;

      width: 100%;

      padding-top: 2%;

    }

    #app{

        width: 100%;

        position: relative;

        left: 0;

    }

    #box{

        position: fixed;

        bottom: 0;

        margin: 0 auto;

        width:100px;

        height:100px;

        background-color: gray;

    }

    #box>div{

        color: skyblue;

    }

</style>

<script type="text/javascript">

    window.onload=function(){

        var app = new Vue({

            el: '#app',

            data: {

                X:0,

                Y:0

            },

            created(){

            },

            methods:{

                touchmove(event){

                    this.X = event.targetTouches[0].clientX

                    this.Y = event.targetTouches[0].clientY

                    let screenWid = $(window).width()

                    let screenHei = $(window).height()

                    let midLeft =  event.targetTouches[0].clientX-($('#box').width()/2)

                    let midRight = $(window).width()-(event.targetTouches[0].clientX+($('#box').width()/2))

                    let midBottom = $(window).height()-(event.targetTouches[0].clientY+($('#box').width()/2))

                    let midTop = event.targetTouches[0].clientY-($('#box').height()/2)

                    if(midLeft<0) midLeft = 0

                    if(midTop<0) midTop = 0

                    if(midRight<0) return

                    if(midBottom<0) return

                    $('#box').css({left:midLeft,top:midTop})

                }

            }

        })

    }

</script>

<!-- 引入vue -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <div id="box" @touchmove='touchmove'>

            <div>鼠标x:{{X}}</div>

            <div>鼠标y:{{Y}}</div>

        </div>

    </div>

</body>

</html>

js实现一个拖拽效果（本例vue中），边界限定，获取鼠标坐标，div坐标的更多相关文章

  1. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  2. 用JS实现版面拖拽效果

    类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...

  3. js实现简单拖拽效果

    方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  6. js实现音量拖拽的效果模拟

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js ...

  7. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  10. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

随机推荐

  1. css实现多余文字隐藏，用省略号代替

    .txt{ overflow: hidden; //溢出内容隐藏 white-space: nowrap; //强制文本在一行内显示 text-overflow: ellipsis; //当对象内文本 ...

  2. C++简单实现unique_ptr

    唯一指针 管理指针的存储,提供有限的垃圾回收工具,与内置指针相比几乎没有开销(取决于所使用的删除程序). 这些对象具有获取指针所有权的能力:一旦它们获得所有权,它们就会通过在某个时候负责删除指向的对象 ...

  3. #主席树，并查集#CodeChef Sereja and Ballons

    SEABAL 分析 考虑用并查集维护当前连续被打破的气球段,那么每次新增的区间就是 \([l_{x-1},x]\) 到 \([x,r_{x+1}]\) 的连接. 只要 \(l,r\) 分别满足在这之间 ...

  4. #树形dp，直径#51nod 1812 树的双直径

    题目 给定一棵树,边权是整数 \(c_i\) ,找出两条不相交的链(没有公共点), 使得链长的乘积最大(链长定义为这条链上所有边的权值之和,如果这条链只有1个点则链长视为0). \(n\leq 4*1 ...

  5. #线段树分治，背包#CF601E A Museum Robbery

    题目 有 \(n\) 个展品正在被展览,每一个展品都有一价值 \(v\) 个和一个混乱度 \(w\) ,现在有 \(m\) 次操作: 1 \(v\) \(w\) :加入一个新的展品,价值为\(v\), ...

  6. HMS Core Insights第九期直播预告——手语服务，助力沟通无障碍

    [导读] 你知道吗?全球有超5%的人群正在遭受听力损失的折磨.这些听障群体由于沟通不便,在日常生活中面对着很多的困难与挑战,建立沟通无障碍环境的需求十分迫切.随着科技的发展,越来越多的人们享受到技术进 ...

  7. 知识图谱在RAG中的应用探讨

    在这篇文章中,我们来详细探讨知识图谱(KG)在RAG流程中的具体应用场景. 缘起 关于知识图谱在现在的RAG中能发挥出什么样的作用,之前看了360 刘焕勇的一个分享,简单的提了使用知识图谱增强大模型的 ...

  8. leetcode-数组中两元素的最大乘积

    题目描述 给你一个整数数组 nums,请你选择数组的两个不同下标 i 和 j,使 (nums[i]-1)*(nums[j]-1) 取得最大值. 请你计算并返回该式的最大值. 示例 1: 输入:nums ...

  9. HarmonyOS开发案例分享：万能卡片也能用来玩游戏

    一.前言 作为一名开发爱好者,从大了讲,我学习并进行HarmonyOS相关开发是为了能为鸿蒙生态建设尽一份绵薄之力,从小了讲,就是为了自己的兴趣.而万能卡片是一个让我非常感兴趣的东西. 很多时候我跟别 ...

  10. Linux之识别HBA的WWN

    一.概念 FC HBA,也即Fibre Channel Host Bus Adapter,光纤通道主机适配器,简称光纤适配器. 在FC网络环境中,主机需要和FC网络.FC存储设备(SAN磁盘阵列)连接 ...