js 实现的拖拽功能

最新推荐文章于 2023-12-06 16:30:49 发布
最新推荐文章于 2023-12-06 16:30:49 发布
阅读量117 收藏
点赞数
文章标签： JavaScript HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanapple123/article/details/83943186
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
function ObjectDragDrop(obj){
    var me = this;
    this.foo = (typeof obj=="string")?document.getElementById(obj):obj;
    
    this.foo.onmousedown = function(e){
          var foo = me.foo;
          e = e||event; 

foo.style.filter = 'alpha(opacity=70)';
    foo.style.position = 'absolute';
          var fstartX = foo.style.left;
          var fstartY = foo.style.top;
          var fstartx = 0;
          var fstarty = 0;
       
          if(fstartY!=''){
           fstartx = parseInt(fstartX.substr(0,fstartX.length-2));
          }else{
             fstartx = foo.offsetLeft;
          }
          if(fstartX!=''){
           fstarty = parseInt(fstartY.substr(0,fstartY.length-2));
          }else{
             fstarty = foo.offsetTop;
          }
          if( e.layerX ){ foo.oOffset = {x:e.layerX,  y:e.layerY };    }
          else          { foo.oOffset = {x:e.clientX-fstartx, y:e.clientY-fstarty};   }
        
          document.onmousemove = me.drag;
          document.onmouseup   = me.drop;
          document.onselectstart = function(){ return false; };         
    }
    
    this.drag = function(e){
          var foo = me.foo;
          e=e||event;
          foo.style.top  = e.clientY - foo.oOffset.y + "px";
          foo.style.left = e.clientX - foo.oOffset.x + "px";
    }
    
    this.drop = function(e){
          var foo = me.foo;
          e=e||event;
          foo.style.filter = 'alpha(opacity=100)';

          document.onmousemove = document.onmouseup = document.onselectstart = null;    
    }    
}
</script>
 </head>

 <body>
  <div id="kkkkk" style="width:300px;height:250px;border-style:solid;border-width:1px;border-color:green;background-color:#C8F1C1;
 background-image:url('http://img.alimama.cn/adbrand/adboard/picture/2011-06-07/123114930001110607104555.jpg')">
   <div style="width:100%;border-style:solid;border-width:1px;border-color:#97C896;cursor:move;">
   <div style="border-style:solid;border-width:1px;border-color:#A6D7A5;cursor:move;">
   <div style="border-style:solid;border-width:1px;border-color:#AEEBAA;cursor:move;">
   <div style="border-style:solid;border-width:1px;border-color:#B6F3B2;cursor:move;">
   <div style="border-style:solid;border-width:1px;border-color:#C6ECBE;cursor:move;">
   </div>
   </div>
   </div>
   </div>
   </div>
  </div> </body>
 <script type="text/javascript">
var test1 = new  ObjectDragDrop("kkkkk");
 </script>
</html>

lanapple123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js实现拖拽功能
weixin_47450807的博客
03-09 3934
一、写在前面 如果我们想要实现拖拽的功能，必须要知道三个事件： 1、onmousedown：鼠标按下事件 2、onmousemove：鼠标移动事件 3、onmouseup：鼠标抬起事件 二、实现思路 我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标， 这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏 览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事 件和鼠标抬起事件。 三、代码 <div id="drag"&g
js实现拖拽功能
10-20
在实现拖拽功能时，我们常常需要通过JavaScript来改变这些默认的样式属性，如改变元素的`left`和`top`属性，来达到移动元素的目的。此外，拖拽事件的捕捉是实现拖拽功能的关键，主要包括`mousedown`、`mousemove`和`...
js应用-实现博客个性主页布局拖拽功能
weixin_30556161的博客
04-22 87
Jquery的Interface elements for jQuery里面的拖拽布局存在一些bug，效率也比较低，GoogleUI google_drag.js有些乱，不是很容易理解，Discuz!NT Space代码满天飞，所以自己参考GoogleUI的思想，简化和优化了一些操作代码，实现了博客系统基本的拖拽布局的效果，暂时未考虑其他浏览器的兼容性问题。下一步准备改造成Jquery的插件形式，...
javascript实现简单的拖拽
10-20 98
简易拖放效果 var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: fun...
js实现主页布局的拖拽功能
weixin_30871701的博客
09-01 127
js实现主页布局的拖拽功能 原文地址：http://www.ajaxsamples.cn/html/15676.html Jquery的Interface elements for jQuery里面的拖拽布局存在一些bug，效率也比较低，GoogleUI google_drag.js有些乱，不是很容易理解，Discuz!NT Space代码满天飞，所以自己参考GoogleUI的思想，简化和优化...
JavaScript实现最简单的拖拽效果
#维多利亚的秘密#
06-03 861
[关闭] 帮妹子做的广告 妹子最近非常用心在开淘宝店，希望我能够支持下，于是，就挤了这块地方给她。 网店地址访问点击这里，卖些可爱饰品，精美日用品等。 您不一定要买，逛逛，收藏收藏就好。对了，如果您想买，直接报我名字，保证包邮，妹子的损失我担着。 JavaScript实现最简单的拖拽效果 by zhangxinxu from http://www.zhangxinxu.com
js实现拖拽效果
Eighteen Z
05-18 1462
js实现拖拽效果 借鉴张鑫旭的拖拽功能，感觉不错。 子绝父相样式自己定义好了,引用函数就可以了. var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; }; // 拖拽 v...
JS实现拖拽功能
热门推荐
weixin_46831501的博客
03-04 1万+
记录一下新学习到的拖拽功能。 H5新增了一个draggable属性，用于对需要拖拽的元素进行标记，定义了这个属性后就可以定义拖拽事件了。拖拽事件如下图： 接着就是上代码： HTML以及CSS部分：比较简单就不多说了 <div class="wrapper"> <section class="show"> <h1>拖动你喜欢的图片</h1> <div class="tshirt"> <img s
Vue项目使用Sortable.js实现拖拽功能
阿威的博客
12-06 424
【代码】Vue项目使用Sortable.js实现拖拽功能。
JavaScript实现拖拽功能
10-15
JavaScript 实现拖拽功能是网页交互中常见的动态效果，它允许用户通过鼠标操作元素在页面上自由移动。本文将深入探讨如何使用纯 JavaScript 实现这一功能，并解析给出的示例代码。 首先，拖拽功能的核心在于监听...
原生js实现拖拽功能基本思路详解
10-18
原生JavaScript实现拖拽功能涉及到的几个核心概念和步骤包括：鼠标事件的捕获、鼠标坐标与元素坐标的计算以及元素位置的动态更新。现在，我们将详细解释这些知识点，并结合示例代码来深入理解。 首先，要实现拖拽，...
基于ASP.NET+MVC5+EF6开发企业网站.zip
08-22
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无VIP，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于整理和收集资料耗费时间的酬劳 3. 积分资源不提供使用问题指导/解答
Steam家庭共享同时玩工具.bat
08-22
Steam家庭共享：两个人同时玩同一个游戏
基于Mysql和JAVA的股票交易系统.zip
08-22
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无VIP，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于整理和收集资料耗费时间的酬劳 3. 积分资源不提供使用问题指导/解答
这个库用于存储及在组内共享《肖像印》项目数据.zip
08-22
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无VIP，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于整理和收集资料耗费时间的酬劳 3. 积分资源不提供使用问题指导/解答
基于51单片机倒计时器秒表定时器数码管显示设计
最新发布
08-22
题目：基于51单片机倒计时器秒表定时器数码管显示设计（毕业设计） 系统构成： 本设计由STC89C52单片机核心电路+4位共阳数码管显示电路+蜂鸣器电路+按键电路+电源电路组成。 系统功能： 1、可以设置倒计时间1到99分种，倒计时最后5秒蜂鸣器报警提示。 2、在倒计时过程随时可以暂停和开始计时。 资料包含： 程序源码 电路图 任务书 答辩技巧 开题报告 参考论文 系统框图 程序流程图 使用到的芯片资料 器件清单 焊接说明 疑难问题说明
goproxy.tar
08-22
goproxy镜像文件
Leensa应用：图像批处理与自动化的创新之旅
08-22
Leensa是一个多功能的平台，不同的语境下可能指代不同的服务或应用。根据搜索结果，以下是几种可能的解释： 1. **健康管理平台**：Leensa 可能是一个用于记录个人健康数据和提供健康建议的平台，用户可以通过注册账户来使用其服务，包括输入个人信息和接收健康相关的反馈 。 2. **VPN服务**：Leensa 也可能是指一个VPN服务，提供全球范围内的网络连接服务，支持不同平台的使用，并且特别指出支持中国大陆地区的注册，用户不需要翻墙即可完成注册 。 3. **AI艺术应用**：Lensa AI是一个照片与视频编辑应用，它能够利用AI技术根据用户的自拍照生成不同风格和变化的艺术化头像。这项服务在社交媒体上非常流行，并且可能与“魔法头像”功能有关 。 4. **社交应用**：在某些情况下，Leensa可能指的是一款需要邀请码注册的社交应用程序，用户可能需要通过社交媒体或官方支持获取邀请码才能完成注册 。 5. **网站服务不可用**：搜索结果中还显示了有关Leensa网站无法访问的信息，表明在某个时间点，Leensa的网站服务器可能遇到了问题，导致用户无法正常访问 。 请注意，Le
html js 实现拖拽功能
05-21
HTML和JavaScript可以实现拖拽功能。以下是一个简单的示例： HTML代码： ``` <div id="drag" draggable="true">Drag me! <div id="drop">Drop here! ``` JavaScript代码： ``` var drag = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值