有事没事搞个图：

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. Rust使用Sauron实现Web界面交互

    目录 简介 架构 Application 和组件 简单入门示例 先决条件 创建新项目 编译库文件 引用库文件 运行项目 界面交互示例 创建项目 编译库文件 引用库文件 引用库文件 运行项目 参考资料 ...

  2. C# Mat Bitmap互转

    var mat = OpenCvSharp.Extensions.BitmapConverter.ToMat(source);//bitmap转mat Cv2.CvtColor(mat, mat, C ...

  3. MySQL 汉字字段 拼音排序

    原数据 排序后 SELECT c1 FROM test ORDER BY CONVERT ( c1 USING gbk )

  4. 关于商业智能（Business Intelligence，简称BI）的认识

    一.早期(1958年)定义 商业智能描述了一系列的概念和方法,通过应用基于事实的支持系统来辅助商业决策的制定. 二.帆软数据调研 帆软数据应用研究院对770多家企业的1400多名从业人员进行了调研(云 ...

  5. 知名压缩软件 xz 被植入后门，黑客究竟是如何做到的？

    昨天,Andres Freund 通过电子邮件告知 oss-security@ 社区,他在 xz/liblzma 中发现了一个隐藏得非常巧妙的后门,这个后门甚至影响到了 OpenSSH 服务器的安全. ...

  6. #KD-Tree#洛谷 3710 方方方的数据结构

    题目 区间加,区间乘,单点查询,撤销修改 分析 由于可以离线,不妨把下标看成第一维,时间看成第二维,那么修改操作相当于在一个矩形上加或者乘, 不妨把查询的节点看作是二维平面上的点,这样实际上就可以用 ...

  7. #模型转换，动态规划#洛谷 1758 [NOI2009] 管道取珠

    题目 分析 考虑每种情况的方案数平方之和,可以被转换成有两个人同时独立进行该游戏,问最后情况相同的方案数. 那么设 \(dp[i][j][k][o]\) 表示第一个人在上管道拿了 \(i\) 个,下管 ...

  8. #线段树，二分#洛谷 2824 [HEOI2016/TJOI2016]排序

    题目 分析 这排序就很难实现,考虑定一个基准,小于该基准的视为0,否则视为1, 那排序可以看作将0和1分开,这就很好用线段树实现了 如果该位置是0,说明这个基准太高,显然可以用二分答案(基准),那么时 ...

  9. #高精度，排列组合、dp#JZOJ 2755 树的计数

    题目 求\(n\)个点直径为\(d\)的标号树个数(多组数据) (\(0\leq d\leq n\leq 50,n>0\)) 分析 首先特判一下\(n==d\)无解,\(d=0\)除非只有一个点 ...

  10. C#_面试题1

    C#_面试题1 1.维护数据库的完整性.一致性.你喜欢用触发器还是自写业务逻辑?为什么? 答:尽可能用约束(包括CHECK.主键.唯一键.外键.非空字段)实现,这种方式的效率最好:其次用触发器,这种方 ...