js 限制新创建的div在父div内拖拽。

最新推荐文章于 2023-04-18 18:12:50 发布
最新推荐文章于 2023-04-18 18:12:50 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 文章标签： div jquery function null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haida360/article/details/6584018
版权
最近在做流程设计器。
function mousemove(ev)
{
    t=jQuery("#context").offset().top;
    l=jQuery("#context").offset().left;
    h=jQuery("#context").height();
    w=jQuery("#context").width();
    if(ev==null) ev = window.event;//IE
    (ev.clientX - posX)
    if((ev.clientX - posX)>l&&(ev.clientX - posX)<(w+l-140)){
        fdiv.style.left = (ev.clientX - posX) + "px";
    }
    if((ev.clientY - posY)>t&&(ev.clientY - posY)<(h+t-80))
     fdiv.style.top = (ev.clientY - posY) + "px";
}

dcl8261425
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jq实现元素拖动函数，并让其不能超出父元素
just_go的博客
01-23 3016
obj1，obj3是jQuery对象。obj1是子元素的jQuery对象，obj3是父元素的jQuery对象。 var drag = function (obj1,obj3) { obj1.bind("mousedown", start); var x; var y; var gapX; var gapY; function start(eve...
JS阻止拖拽的默认行为
MYG_G
06-22 2653
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:100px; height:100px; background: orangered; position: absolute; } #box2{ width:100px; height:100px.
div在一个父容器中进行移动
u012797664的专栏
01-09 835
移动div      var x_start,y_start,x_move,y_move,x_end,y_end,page_x,page_y;      //点击的时候      document.getElementById("testDiv").addEventListener('touchstart',function(e){       //获取手指的位置
js 元素拖拽，并阻止触发元素的点击事件
qq_34799366的博客
11-10 1111
js 图标拖拽
vue子元素绑定的事件, 阻止触发父级上的事件处理
phpxxo的博客
07-25 1962
index1.html <html> <head> <style> .parent{ width:200px; background:#ffc; } .child{ list-style: none; border:1px solid red; } </style> <script src="../../libs/vue.js"><
JavaScript实现可拖拽的拖动层Div实例
10-23
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
jQuery创建div层自由拖动布局代码
06-10
在网页开发中，动态创建和布局div元素是常见的需求，特别是在构建交互式用户界面时。jQuery库因其简洁的API和强大的功能，常被用来处理这样的任务。本篇将深入讲解如何利用jQuery实现div层的自由拖动以及尺寸调整...
javascript之DIV拖动类 支持在FF下拖动,调用简单
10-30
javascript之DIV拖动类 支持在FF下拖动,调用简单
js实现div在页面拖动效果
01-21
本文实例讲述了js实现div在页面拖动效果。分享给大家供大家参考，具体如下： <style type=text/css> body { margin: 0px; } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; ...
嵌套div中点击子元素，阻止父元素事件的两种方法
Sky.Long的博客
11-18 2806
嵌套div中点击子元素，阻止父元素事件的两种方法
JS+DIV 可拖拽,弹出窗口
04-18
JS写的可以拖拽的窗口.很好用.效果不错.上传上来供大家使用.
JS实现可拖动的DIV效果并限制范围区域
01-12
利用JS实现可拖动的DIV效果，在原有基础上增加的限制在一定区域内的效果。方便，易用。可以很方便地移动到您的工程里面
关于在Vue中如何阻止子元素触发父元素的事件
最新发布
weixin_51747462的博客
04-18 2394
关于在Vue中如何阻止子元素触发父元素的事件
div在父级自由移动不超出范围
slom_fxt的博客
09-22 211
div在父级自由移动不超出范围,注意会不会出现半角问题
js实现鼠标拖拽div
若水弹丸之地
02-28 5111
直接上代码，简单实用。 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src='./js/jquery-1.8.3.min.js
div嵌套div，内部的div可拖动
03-28
可以使用HTML5中的draggable属性和JavaScript中的drag事件来实现内部的div可拖动。 首先，在内部的div中添加draggable属性，将其设置为true，表示可拖动。 ```html <div class="outer"> <div class="inner" draggable="true"></div> </div> ``` 然后，在JavaScript中，为内部的div添加dragstart、drag、dragend事件，分别表示拖动开始、拖动中和拖动结束。 ```javascript var inner = document.querySelector('.inner'); inner.addEventListener('dragstart', function(event) { // 拖动开始时 // 设置拖动的数据和效果 event.dataTransfer.setData('text/plain', '拖动的文本'); event.dataTransfer.effectAllowed = 'move'; }); inner.addEventListener('drag', function(event) { // 拖动中 // 可以在这里实现拖动的效果 }); inner.addEventListener('dragend', function(event) { // 拖动结束 // 可以在这里处理拖动结束后的逻辑 }); ``` 此外，还可以在外部的div中添加dragover、dragenter、dragleave和drop事件，来实现拖放的效果。 ```javascript var outer = document.querySelector('.outer'); outer.addEventListener('dragover', function(event) { // 阻止默认的拖放行为 event.preventDefault(); // 设置允许的拖放效果 event.dataTransfer.dropEffect = 'move'; }); outer.addEventListener('dragenter', function(event) { // 在拖动进入时添加样式 outer.classList.add('dragover'); }); outer.addEventListener('dragleave', function(event) { // 在拖动离开时移除样式 outer.classList.remove('dragover'); }); outer.addEventListener('drop', function(event) { // 阻止默认的拖放行为 event.preventDefault(); // 获取拖动的数据 var data = event.dataTransfer.getData('text/plain'); // 在drop事件中处理拖放的逻辑 }); ``` 通过以上的代码，就可以实现内部的div可拖动的效果了。当然，还可以根据具体的需求进行修改和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值