Javascript 元素拖曳操作

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量413 收藏
点赞数
文章标签： javascript border opera
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=" http://www.w3.org/1999/xhtml">
  3. <!-- DW6 -->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>shawl.qiu template</title>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.     function fDragging(obj, e, limit){
  10.         if(!e) e=window.event;
  11.         var x=parseInt(obj.style.left);
  12.         var y=parseInt(obj.style.top);
  13.         
  14.         var x_=e.clientX-x;
  15.         var y_=e.clientY-y;
  16.         
  17.         if(document.addEventListener){
  18.             document.addEventListener('mousemove', inFmove, true);
  19.             document.addEventListener('mouseup', inFup, true);
  20.         } else if(document.attachEvent){
  21.             document.attachEvent('onmousemove', inFmove);
  22.             document.attachEvent('onmouseup', inFup);
  23.         }
  24.         
  25.         inFstop(e);    
  26.         inFabort(e)
  27.         
  28.         function inFmove(e){
  29.             var evt;
  30.             if(!e)e=window.event;
  31.             
  32.             if(limit){
  33.                 var op=obj.parentNode;
  34.                 var opX=parseInt(op.style.left);
  35.                 var opY=parseInt(op.style.top);
  36.                 
  37.                 if((e.clientX-x_)<0) return false;
  38.                 else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;
  39.                 
  40.                 if(e.clientY-y_<0) return false;
  41.                 else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;
  42.                 //status=e.clientY-y_;
  43.             }
  44.             
  45.             obj.style.left=e.clientX-x_+'px';
  46.             obj.style.top=e.clientY-y_+'px';
  47.             
  48.             inFstop(e);
  49.         } // shawl.qiu script
  50.         function inFup(e){
  51.             var evt;
  52.             if(!e)e=window.event;
  53.             
  54.             if(document.removeEventListener){
  55.                 document.removeEventListener('mousemove', inFmove, true);
  56.                 document.removeEventListener('mouseup', inFup, true);
  57.             } else if(document.detachEvent){
  58.                 document.detachEvent('onmousemove', inFmove);
  59.                 document.detachEvent('onmouseup', inFup);
  60.             }
  61.             
  62.             inFstop(e);
  63.         } // shawl.qiu script
  64.  
  65.         function inFstop(e){
  66.             if(e.stopPropagation) return e.stopPropagation();
  67.             else return e.cancelBubble=true;            
  68.         } // shawl.qiu script
  69.         function inFabort(e){
  70.             if(e.preventDefault) return e.preventDefault();
  71.             else return e.returnValue=false;
  72.         } // shawl.qiu script
  73.     }
  74. //]]>
  75. </script>
  76. </head>
  77. <body>
  78. <div  style=" border:1px dashed blue; width: 760px; height:600px;  text-align:center; position:absolute; left:100px; top: 10px;"> this parent
  79.  
  80.     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" οnmοusedοwn="fDragging(this, event, true);">
  81.         element <br/>
  82.         dragging compatibility for IE, Opera, Firefox. 
  83.     </div>
  84.     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" οnmοusedοwn="fDragging(this, event, true);">
  85.         element 1<br/>
  86.         dragging compatibility for IE, Opera, Firefox. 
  87.     </div>
  88.     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:200px; top: 250px;" οnmοusedοwn="fDragging(this, event, false);">
  89.         element 2<br/>
  90.         dragging compatibility for IE, Opera, Firefox. <br/>
  91.         <font color="red">dragging everywhere</font>
  92.     </div>
  93. </div>
  94. </body>
  95. </html>
 
jant126
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript操作select元素实例分析
10-24
主要介绍了javascript操作select元素的方法,可实现针对select元素选中元素时动态改变html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
HTML5属性 draggable 实现拖拉事件
Dilomen的博客
01-17 5398
 HTML5属性 draggable可以让元素变成可拖动 &lt;p draggable="true"&gt;这是一个可拖动的段落。&lt;/p&gt;  该属性有三个值可选：true | false | auto true：表示可拖动 false: 表示不可拖动 auto: 表示浏览器默认行为 拖动事件： 拖动的元素上触发：事件皆由拖动元素监听 ondragstart: 用户开始...
Javascript元素拖曳操作 (兼容IE,Opera,Firefox)
万里船的专栏
11-23 788
导读： 　　说明: 拖曳流程鼠标按下->(鼠标移动->元素移动) 鼠标按键弹起->元素停止移动 针对 IE, 主要使用 obj.attachEvent() &&obj.detachEvent() 针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() &&obj.removeEventListener Opera 以上两种方法都支持 在本文中, 需要拖曳的元素
Javascript元素拖曳操作Byshawl.qiu (兼容IE,Opera,Firefox)
11-15 1620
Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox) 说明: 拖曳流程鼠标按下->(鼠标移动->元素移动) 鼠标按键弹起->元素停止移动 针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent() 针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj
Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
11-10 2619
Javascript  元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)说明: 拖曳流程鼠标按下->(鼠标移动->元素移动)鼠标按键弹起->元素停止移动针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent()针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && ob
javascript操作元素的常见方法小结
10-16
主要介绍了javascript操作元素的常见方法,结合实例形式总结分析了JavaScript针对页面元素动态获取、赋值、动态操作相关使用技巧,需要的朋友可以参考下
JavaScript HTML DOM元素 节点操作汇总
10-16
主要介绍了JavaScript HTML DOM元素 节点操作汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
纯JavaScript操作DOM节点
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
JavaScript操作DOM元素的childNodes和children区别
10-24
主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 350
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 340
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1006
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 509
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 404
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 369
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
使用vue3+ts+vite从零开始搭建bolg(二)
qq_75246137的博客
04-21 240
svg:用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。component中的index.ts,注册全局组件。package.json中的scripts配置项。vite.config.ts文档中配置。SvgIcon的index.vue文件。.env.development文件。.env.production文件。vite.config.ts配置。tsconfig.ts配置。.env.test文件。
【内附完整redis配置文件】linux服务器命令设置redis最大限制内存大小，设置redis内存回收机制，redis有哪些回收机制
G佳伟
04-23 460
redis经常出现进程自己挂掉，经排查后是因为redis占用内存过大，导致服务器内存爆满进程自己挂掉。
JavaScript函数的作用域
猿码互联
04-23 170
JavaScript函数的作用域指的是变量的可访问范围。在JavaScript中，函数作用域是基于词法作用域（也称为静态作用域）的，意味着函数的作用域在函数被创建时就确定了，而不是在函数被调用时。这样创建的匿名函数会立即执行，并且其中的变量只能在函数内部访问，外部无法访问。这种方式在旧版本的JavaScript中很常见，但在ES6之后，可以直接使用块级作用域来实现同样的效果。需要注意的是，在ES6之前，JavaScript中并没有块级作用域的概念，只有函数作用域和全局作用域。
通过 JavaScript 点击元素
06-07
是的，可以使用 JavaScript 来点击元素，而不是使用 Selenium 提供的 `click()` 方法。...这种方法可以绕过 `ElementClickInterceptedException` 异常，并且可以在某些情况下更可靠地操作页面元素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值