拖拽盒子在指定位置内移动

最新推荐文章于 2021-10-21 10:33:28 发布
最新推荐文章于 2021-10-21 10:33:28 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 典型小案例 文章标签： 拖拽盒子在指定位置内移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanghl150426/article/details/82149065
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 600px;
                height: 600px;
                background: #ddd;
                position: relative;
                left: 0;
                top: 0;
            }
            #box{
                width: 100px;
                height: 100px;
                background: #000;
                position: absolute;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="box"></div>
        </div>
        <script type="text/javascript" src="js/jquery.js" ></script>
    <script>
        $(function(){
            var flag;//定义了一个全局变量
            $("#box").mousedown(function(e){//鼠标按下
                flag = true;
                /*
                 pageX--鼠标在页面上的位置-x轴
                 pageY--鼠标在页面上的位置-y轴
                 * */
                disX = e.pageX - $("#box").offset().left;
                disY = e.pageY - $("#box").offset().top;
            })
            $(document).mousemove(function(e){//鼠标移动
                var w = $("#div1").width()-$("#box").width();//最右边边界值
                var h  = $("#div1").height()-$("#box").height();//最下边边界值
                if(flag){
                    x = e.pageX - disX;
                    y = e.pageY - disY;
                    if(x<0) x=0;
                    if(y<0) y=0;
                    if(x>w) x=w;
                    if(y>h) y=h;
                    $("#box").css({
                        "left":x+"px",
                        "top":y+"px"
                    });    
                }
            }).mouseup(function(){//鼠标离开
                flag = false;
            })
        })
    </script>
    </body>
</html>

zhanghl150426
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现可拖动的DIV效果并限制范围区域
01-12
利用JS实现可拖动的DIV效果，在原有基础上增加的限制在一定区域内的效果。方便，易用。可以很方便地移动到您的工程里面
实现简单的盒子拖拽效果
qq_37947438的博客
07-16 763
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex,nofollow"> <title>拖拽效果</title> </head> <style type="text/css"> body{ overflow: hidden;.
html+css+javascript实现可拖拽盒子详解
weixin_47469299的博客
10-21 784
<html> <head> <meta charset="utf-8"> <title>鼠标事件</title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: aqua; position: absolute; } #box1{ width: 100px; .
html中盒子的定位,css盒子的定位有哪些方法？
weixin_36143290的博客
06-07 3326
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定他的位置，盒子定位分为以下四种 ：推荐：css手册1、静态位置(position：static)也就是默认值：每一个元素...
拖动排序 拖过拖动可以任意拖放到指定位置
04-04
拖动排序 拖过拖动可以任意拖放到指定位置
基于Vue实现图片在指定区域内移动的思路详解
10-17
主要介绍了基于Vue实现图片在指定区域内移动，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
10-17
主要介绍了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
C++Qt实现拖拽按钮插入指定位置并重新排序
03-15
1.效果类似于Windows桌面应用可以通过鼠标拖拽插入指定位置，并自动排序的效果。 2.开发环境Qt Creator,版本5.5.1。 3.可以实现响应点击信号。 4.有插入位置跟踪标线标志。 5.有鼠标选中拖拽过程中的截图效果。 6....
vue实现div可拖动位置也可改变盒子大小的原理
10-14
主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
鼠标拖拽拖动盒子时，与盒子内某些点击事件冲突问题解决
09-15
鼠标拖拽拖动盒子时，与盒子内某些点击事件冲突问题解决
HTML 布局 浮动 位置移动 和 边框盒子模型例子
06-24
HTML 布局 浮动 位置移动 和 边框盒子模型例子 通过这些文件例子的使用你基本可以了解布局的一些相关只是，通过例子自己尝试做出自己的页面
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动
06-20
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动元素到指定的对应位置
css基础知识学习
AYUKiss的博客
05-19 630
CSS 字体属性 字体系列 font-family 属性定义文本的字体系列。 p { font-family:"微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";} //使用多个字体时，如果第一个字体浏览器没有，就显示第二个 字体大小 p { font-size: 20px; }  px（像素）大小是我们网页的最常用的单位  谷歌浏览器默认的文字大小为16px  不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要
HTML5拖动元素放到指定位置
温壁
04-25 8434
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #box {width: 300px;height: 200px;border
javascript拖拽盒子移动的实现
fisher
10-12 3999
原理比较简单，可以参照之前的文章javascript淘宝主图放大镜功能帮助理解。 *{ margin: 0; padding: 0; } #box{ position: absolute; left: 50px; top: 50px; width: 200px; height: 200px;
js实现鼠标拖拽盒子移动效果
日常分享
07-09 1950
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin:0;
JS移动某些元素到指定位置
热门推荐
MOONCOM的博客
06-15 1万+
一、点击按钮实现页面中的某些元素移动到 指定区域（根据用户输入）/ 规定区域（代码中写死的） 通过 document.getElementById("demo").appendChild(document.getElementById("test")); 来实现 注意：1、也可以通过 getElementsByClassName() 等来实现； 2、这里的事件，除了appendChild
Vue实现拖拽盒子
hxy3197945541的博客
02-15 1404
//引入vue.js //以下是在script标签中执行的 let vm=new Vue({ el:"#app", //局部注册指令 directives:{ drag(el){ el.οnmοusedοwn=function (e) { //鼠标位置减去盒子到dom左边的距离 let x=e.clientX-el.offsetLeft ; let y=e.clientY-el.offsetTop...
音乐播放，图标转动，点击音乐停止，图标不动
zhanghl150426的博客
08-28 4596
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;animation&lt;/title&gt;     &lt;meta name="viewport" content=&quot
axure实现元素根据指定位置、路线进行移动
最新发布
10-16
通过使用Axure，我们可以实现元素按照指定位置和路线进行移动。 首先，我们可以在Axure中创建所需的元素。可以是按钮、文本框、图像等等。然后，我们可以使用Axure的“交互”功能，为元素添加移动效果。在选中元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值