程序员经验分享-hwhale

Javascript防止可拖动div位于父div之外

2024-03-15

我有可拖动的div。我希望使用 javascript 将这个可拖动的 div 限制在父级中。我知道如何使用 jquery UI 可拖动插件来防止可拖动 div。但我不确定如何使用本机 javascript 限制可拖动。请在下面找到我的代码：

<!DOCTYPE HTML>
<html>
<head>
<style>
.draggabletarget {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<div class="parent" style="border:1px solid red;height:600px;width:600px;">

<div class="draggabletarget" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">
  <p >Drag me!</p>
</div>

</div>

<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  document.getElementById("demo").innerHTML = "The p element is being dragged";
}

function allowDrop(event) {
  event.preventDefault();
}

</script>

</body>
</html>

在此代码中，我有一个带有父级的 div。我希望类为draggabletarget 的可拖动div 不应该拖动到父div 之外。我怎样才能在本机 JavaScript 中做到这一点。请建议


function $(el){
                return document.getElementById(el);
            }
            var isDragging = false;
            
            var tzdragg = function(){
                return {
                    move : function(divid,xpos,ypos){
                        var a = $(divid);
                        $(divid).style.left = xpos + 'px';
                        $(divid).style.top = ypos + 'px';
                    },
                    setDragging : function() {
                        isDragging = true;
                    },
                    resetDragging : function() {
                        isDragging = false;
                    },
                    startMoving : function(evt){
                       
                        evt = evt || window.event;
                        var posX = evt.clientX,
                            posY = evt.clientY,
                            a = $('elem'),
                        divTop = a.style.top,
                        divLeft = a.style.left;
                        
                        divTop = divTop.replace('px','');
                        divLeft = divLeft.replace('px','');
                        var diffX = posX - divLeft,
                            diffY = posY - divTop;
                        document.onmousemove = function(evt){
                            evt = evt || window.event;
                            var posX = evt.clientX,
                                posY = evt.clientY,
                                aX = posX - diffX,
                                aY = posY - diffY;
                       var boun=document.getElementById("parent").offsetWidth-document.getElementById("elem").offsetWidth;
                           
                            if((aX>0)&&(aX<boun)&&(aY>0)&&(aY<boun))
                            tzdragg.move('elem',aX,aY);
                        }
                    },
                    stopMoving : function(){
                        var a = document.createElement('script');
                        document.onmousemove = function(){}
                        
                        if(!isDragging) {
                            console.log('clicked');
                        }
                    },
                }
            }();
#elem
        {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            cursor: default;
        }
<div style="height:400px; width:400px; border:solid 1px black;position: absolute;top: 0;
left: 0;" id='parent'>
    <div id='elem' onmousedown='tzdragg.resetDragging();tzdragg.startMoving(event);' onmouseup='tzdragg.stopMoving();' onmousemove='tzdragg.setDragging();'
        >
    </div>
    </div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

draggable

Javascript防止可拖动div位于父div之外 的相关文章

  • 如何在codeigniter中将上传图片比例限制为16:9？

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload

  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开？

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库

  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch

  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的

  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我

  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并

  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre

  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html

  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png

  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后

  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov

  • Vuejs 2：去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不

  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional

  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C

  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

  • 对于只触及我的工作表的 Google 表格脚本，收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该

  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检

  • 如何隐藏/禁用 Highcharts.js 中的图例框？

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title

  • 用于交互式图形绘制的轻量级 JavaScript 库？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有兴趣了解用于绘制交互式图表的最轻量级 javascript 库 我掌握的数据主要是与海洋研究相关的科学数据 我知道一些 jquery

  • Vue.js[vuex] 如何从突变中调度？

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • Django 模型子类的类型提示

    我有 Django 视图的辅助函数 如下所示 代码如下 它返回 None 或与给定查询匹配的单个对象 例如pk 1 from typing import Type Optional from django db models import

  • 哪个 API 允许我将 PayPal 保存为可重复使用的付款类型

    我目前正在开展一个项目 将 PayPal 实施为类似于保存的信用卡的可重复使用的付款选项 我在类似的网站上看到过这样做http www fab com http www fab com它允许用户登录 PayPal 一次 然后存储他们的付款信

  • 使用 PostgreSQL、Javascript 库或可重用函数存储和索引 YAML？

    PostgreSQL http www postgresql org 9 2 具有原生 JSON 支持 不过 我想将人类可读的配置文件存储在 YAML 中 我想我想索引一些 但不是全部 配置文件值 因此我想知道 例如 是否可以在 Postg

  • 如何将mongoDB数据导出为CSV格式？

    我正在寻找一种非常简单的方法将数据从 mongoDB 导出到 CSV 大多数答案都涉及 bash 脚本 等等 是否有一个简单的 mongoDB 命令可以将数据导出到 CSV 中 Update 从 mongo 3 0 6 开始 csv不再支持

  • 用于填写 PDF 表单的 Android 应用程序

    我想为 PDF 表单设计一个应用程序 只是为了通过 Android 应用程序自动填充它 我想向用户展示一些在 xml android 应用程序 UI 上设计的表单 并用传入的信息填充 pdf 表单 我有 PDF 格式的表格 我只想将其与我的

  • 使用来自同一 URL 的多个 POST 数据进行抓取

    我已经创建了一个蜘蛛 它可以收集具有匹配电话号码的公司名称列表 然后将其保存到 CSV 文件中 然后我想使用 CSV 文件中的电话号码作为 POST 数据从另一个网站抓取数据 我希望它循环访问相同的起始 URL 但只是抓取每个电话号码生成的

  • 剔除映射 JSON 读取时出错

    我正在 Web 应用程序上使用淘汰赛 该应用程序使用 foreach 显示数据 包括所有需要的库 我收到以下错误 Error Unable to parse bindings Message ReferenceError d is not

  • jquery 中两个类之间的淡入淡出

    我希望能够淡出这门课 h2 class care home fees a title Care Home Fees href Text a h2 并淡入此 h2 class care home fees over a title Care

  • Marshal 大小常量数组

    我试图在结构内有一个堆栈分配的数组 我指的是指针 但我希望在没有额外代码的情况下完成分配 因为我在编写代码时知道大小 我不想做一堆new当我创建我的结构时 如果我什至可以做到不unsafe完美的背景 我尝试了一些东西 但效果不佳 我是 C

  • “Quartz.Impl.StdSchedulerFactory”的类型初始值设定项引发异常

    我正在按照以下说明进行操作Quartz Net 的教程 http quartznet sourceforge net tutorial index html非常接近 但我在尝试调试我的项目时遇到启动错误 The type initializ

  • 在 NHibernate 中如何将 Replace 添加到 Restrictions.Eq？

    我想添加一个 Restrictions Eq 并用 TSQL 替换列名 我该怎么做呢 string location Columbus OH var requestQuery Session CreateCriteria

  • 命名空间动态加载的 javascript 文件的内容

    是否可以为动态插入的 JavaScript 文件命名空间 我知道我可以通过创建一个动态包含 JavaScript 文件script标记并将其插入到 DOM 中 但是这个包含的文件可以命名空间吗 所以 如果该文件有一个名为bar 我想通过命名

  • 有没有办法暂停所有 Threading.Timer 计时器？

    我是 C 新手 正在开发一个需要多个计时器的程序 我想知道当程序运行 CPU 密集型代码时是否有办法同时暂停该程序中的所有计时器 目前 当前启用的计时器尝试赶上密集操作期间引发的所有计时器事件 我认为您可以创建这些计时器的列表 当您激活它们

  • 在 Java 中运行 CUDA 代码的最简单方法是什么？

    我有一些用 C 语言编写的 CUDA 代码 它似乎工作正常 它是普通的旧 C 而不是 C 我正在运行一个 Hadoop 集群 并且想要整合我的代码 因此理想情况下我希望在 Java 中运行它 长话短说 系统太复杂 目前 C 程序解析日志文件

  • 在android中以不同模式打开手电筒

    下面的代码可以在不支持手电筒的 Android 设备 例如摩托罗拉剃须刀 上运行吗 请哪位好心人测试一下是否有这样的手机并请告诉我 提前致谢 if isFlashOn if camera null params null return Li

  • ClientRect 神秘地比 WindowRect 小？

    我在 Visual Studio 中启动了一个新的 Windows 桌面 C 项目 窗口创建如下所示 HWND hWnd CreateWindowW szWindowClass szTitle WS OVERLAPPEDWINDOW CW

  • 如何将图表嵌入到幻灯片或苹果的主题演讲中？

    我正在学习如何用plotly 生成图表 我是生物化学研究生 我想将这些图表用于演示文稿 例如幻灯片 主题演讲 我想知道是否有人可以给我一个总体策略或教程链接 谢谢你 Plotly 有一个 MS Office 应用程序 允许嵌入 Window

  • Java中重新定义静态方法意味着什么？

    我一直在阅读 SCJP 学习指南中有关静力学的部分 其中提到了以下内容 静态方法不能被重写 但它们可以被重新定义 重新定义到底意味着什么 是否存在父级和子级中都存在具有相同签名的静态方法的情况 但它们是通过类名单独引用的 例如 class

  • 如何在 mongodb 的正则表达式 $match 中使用聚合中的字段？

    我的用例的一个非常简化的版本是查找以作者姓名开头的所有帖子 如下所示 gt db users find id ObjectId 5c4185be19da7e815cb18f59 name User1 id ObjectId 5c4185be

  • Javascript防止可拖动div位于父div之外

    我有可拖动的div 我希望使用 javascript 将这个可拖动的 div 限制在父级中 我知道如何使用 jquery UI 可拖动插件来防止可拖动 div 但我不确定如何使用本机 javascript 限制可拖动 请在下面找到我的代码

热门标签