javascript 实现拖动

最新推荐文章于 2023-03-31 21:28:59 发布
最新推荐文章于 2023-03-31 21:28:59 发布
阅读量601 收藏
点赞数 1
分类专栏： javascript 文章标签： javascript function div xhtml server html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinxubest87/article/details/1958708
版权

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <meta  http-equiv="refesh" content="2"/>
  <%--  <script language="javascript" type="text/javascript">
        document.write("输入一个数");
        var str = prompt("请输入一个数","");
        var result = eval(str);
        document.write(str+result);
    </script>--%>
        <script language="javascript" type="text/javascript">
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
   <a href="#"  onmousemove = "document.all.Layer1.style.visibility='visible'">fdsafdafdafd</a>
    <div style="width:140px; height:140px; background-color:orange; cursor:pointer"></div>
   
   
    <div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" οnmοusedοwn="divBlock_event_mousedown();">I am a div.</div>
<script>
function divBlock_event_mousedown(){
  document.οnmοusemοve=document_event_mousemove;
 
  var I_do_not_care=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}

function document_event_mousemove(e){
  var e, obj;
  obj=document.getElementById("divBlock");
  e=window.event?window.event:e;
obj.firstChild.nodeValue=e.clientX+":"+e.clientY;
}

function document_event_mouseup(e){
 document.οnmοusemοve="";
 var I_do_not_care=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
</script>
<script>
function divBlock_event_mousedown(e){
 var e, obj, temp;
  obj=document.getElementById("divBlock");
  e=window.event?window.event:e;
  obj.startX=e.clientX-obj.offsetLeft;
  obj.startY=e.clientY-obj.offsetTop;
 
  document.οnmοusemοve=document_event_mousemove;
  temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}

function document_event_mousemove(e){
  var e, obj;
  obj=document.getElementById("divBlock");
  e=window.event?window.event:e;
 
  with(obj.style){
   position="absolute";
   left=e.clientX-obj.startX+"px";
   top=e.clientY-obj.startY+"px";
  }
}

function document_event_mouseup(e){
 var temp;
 document.οnmοusemοve="";
 temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
</script>
 
 
<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="div2" >

<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="div1" οnmοusedοwn="divBlock_event_mousedown(arguments[0]);"></div>
</div>
<script>
f=0.95; // 运动阻尼
k=0.85; // 碰撞弹性系数
g=1; // 重力加速度

window.οnlοad=init;

function init(){
 var obj;
  obj=document.getElementById("divBlock");
 
  obj.speedX=parseInt(Math.random()*5);
  obj.speedY=parseInt(Math.random()*5);
 
  obj.move=function(){
   // 这里俺暂时不写，呵呵
  }
}
</script>

 
<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="div3" ></div>
<script>
f=0.95; // 运动阻尼
k=0.85; // 碰撞弹性系数
g=1; // 重力加速度

window.οnlοad=init;

function init(){
 var obj;
  obj=document.getElementById("divBlock");
 
  obj.speedX=parseInt(Math.random()*5);
  obj.speedY=parseInt(Math.random()*5);
 
  obj.move=function(){
   // 这里俺暂时不写，呵呵
  }
}
</script>

<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="div4" ></div>
<script>
f=0.005; // 运动阻尼
k=0.7; // 碰撞弹性系数
g=1; // 重力加速度
var obj;

window.οnlοad=init;

function init(){
 obj=document.getElementById("divBlock");
 
  obj.speedX=140;
  obj.speedY=400;
 
  obj.move=function(){
   var x, y, mx, my;
   x=this.offsetLeft;
   y=this.offsetTop;
   mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
   my=document.body.clientHeight-this.offsetHeight;
   this.speedY+=g; // 计算重力加速度影响的y方向速度
   this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
   this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
   if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
   x+=this.speedX; y+=this.speedY; // 计算坐标
   if(x<0){ x=-x; this.speedX=Math.abs(this.speedX)*k; } // 计算边界碰撞
   if(y<0){ y=-y; this.speedY=Math.abs(this.speedY)*k; }
   if(x>mx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
   if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
   if(Math.abs(this.speedX)<1)this.speedX=0; // 消除数据下溢
   if(Math.abs(my-y)<4&&Math.abs(this.speedY)<4){ y=my; this.speedY=0; } // 消除临界状态的抖动
   this.style.left=parseInt(x)+"px"; // 实现移动
   this.style.top=parseInt(y)+"px";
  }
 
  setInterval("obj.move();",10);
}
</script>
 
<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="div5" ></div>
<script>
f=0.005; // 运动阻尼
k=0.7; // 碰撞弹性系数
g=1; // 重力加速度
var obj, timeHandle;

window.οnlοad=init;

function init(){
 obj=document.getElementById("divBlock");
 
  obj.speedX=140;
  obj.speedY=400;
 
  obj.move=function(){
   var x, y, mx, my;
   x=this.offsetLeft;
   y=this.offsetTop;
   mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
   my=document.body.clientHeight-this.offsetHeight;
   this.speedY+=g; // 计算重力加速度影响的y方向速度
   this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
   this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
   if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
   x+=this.speedX; y+=this.speedY; // 计算坐标
   if(x<0){ x=-x; this.speedX=Math.abs(this.speedX)*k; } // 计算边界碰撞
   if(y<0){ y=-y; this.speedY=Math.abs(this.speedY)*k; }
   if(x>mx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
   if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
   if(Math.abs(this.speedX)<1)this.speedX=0; // 消除数据下溢
   if(Math.abs(my-y)<4&&Math.abs(this.speedY)<4){ y=my; this.speedY=0; } // 消除临界状态的抖动
   this.style.left=parseInt(x)+"px"; // 实现移动
   this.style.top=parseInt(y)+"px";
   this.timeHandle=setTimeout("obj.move();",10);
  }
 
  obj.stop=function(){
   clearTimeout(this.timeHandle);
  }
 
  obj.οnmοusedοwn=function(){ this.stop(); }
  obj.οnmοuseup=function(){ this.move(); }
 
  obj.move();
}
</script>
 
 
<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="div6" ></div>
<script>

f=0.003; // 运动阻尼
k=0.8; // 碰撞弹性系数
g=0.6; // 重力加速度
var obj, timeHandle;

window.οnlοad=init;

function init(){
 obj=document.getElementById("divBlock");
 
  obj.speedX=0;
  obj.speedY=0;
  obj.lastX=obj.offsetLeft;
  obj.lastY=obj.offsetTop;
 
  obj.move=function(){
   this.stop();
   var x, y, mx, my;
   x=this.offsetLeft;
   y=this.offsetTop;
   mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
   my=document.body.clientHeight-this.offsetHeight;
   this.speedY+=g; // 计算重力加速度影响的y方向速度
   this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
   this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
   if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
   x+=this.speedX; y+=this.speedY; // 计算坐标
   if(x<0){ x=-x; this.speedX=Math.abs(this.speedX)*k; } // 计算边界碰撞
   if(y<0){ y=-y; this.speedY=Math.abs(this.speedY)*k; }
   if(x>mx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
   if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
   if(Math.abs(this.speedX)<1)this.speedX=0; // 消除数据下溢
   if(Math.abs(my-y)<4&&Math.abs(this.speedY)<4){ y=my; this.speedY=0; } // 消除临界状态的抖动
   this.style.left=parseInt(x)+"px"; // 实现移动
   this.style.top=parseInt(y)+"px";
   this.timeHandle=setTimeout("obj.move();",10);
  }
 
  obj.stop=function(){
   clearTimeout(this.timeHandle);
  }
 
  obj.οnmοusedοwn=function(){ this.stop(); divBlock_event_mousedown(arguments[0]); }
 
  obj.move();
}

function divBlock_event_mousedown(e){
 var e, temp;
  e=window.event?window.event:e;
  obj.startX=e.clientX-obj.offsetLeft;
  obj.startY=e.clientY-obj.offsetTop;
 
  document.οnmοusemοve=document_event_mousemove;
  temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}

function document_event_mousemove(e){
  var e;
  e=window.event?window.event:e;
 
  with(obj.style){
   position="absolute";
   left=e.clientX-obj.startX+"px";
   top=e.clientY-obj.startY+"px";
  }
  obj.speedX=(obj.offsetLeft-obj.lastX)*3;
  obj.speedY=(obj.offsetTop-obj.lastY)*3;
  obj.lastX=obj.offsetLeft;
  obj.lastY=obj.offsetTop;
}

function document_event_mouseup(e){
 var temp;
 document.οnmοusemοve="";
 temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
 obj.move();
}
</script>
    </form>
</body>
</html>
 

yinxubest87
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现简单的拖拽
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
07-29 260
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JavaScript实现拖拽效果
11-21
JavaScript实现拖拽效果是网页交互中常见的功能，它允许用户通过鼠标操作页面上的元素并自由移动。在本文中，我们将详细探讨如何利用JavaScript实现这一效果，以及涉及到的关键坐标属性。 首先，实现拖拽效果需要对...
js实现拖拽
编码世界
09-19 831
mousedown、mousemove、mouseup监听这三个事件。
JavaScript：js实现拖拽
一火的专栏
12-21 837
js实现拖拽 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>js实现拖拽</title> <script src=
JavaScript实现拖拽盒子效果
11-21
本实例展示了如何通过JavaScript实现以下功能： 1. 单击“关闭”按钮关闭盒子。 2. 点击左上方的“点击注册”打开盒子。 3. 鼠标悬停在盒子上方蓝色区域时显示十字光标。 4. 点击并按住鼠标可移动盒子。 5. 松开...
利用JavaScript实现拖拽改变元素大小|angluo-javascript-173722.pdf
10-20
在网页中实现拖拽来改变元素大小是前端交互中常见的需求，为了达到这个效果，我们通常会使用JavaScript来编写相关的逻辑代码。在本篇知识分享中，我们将详细探讨如何利用JavaScript来实现拖拽改变元素大小的原理和...
JavaScript实现拖拽功能
10-15
JavaScript 实现拖拽功能是网页交互中常见的动态效果，它允许用户通过鼠标操作元素在页面上自由移动。本文将深入探讨如何使用纯 JavaScript 实现这一功能，并解析给出的示例代码。 首先，拖拽功能的核心在于监听...
js拖拽实现
zyzn1425077119的博客
10-18 630
拖拽为dragstart-drag-dragenter-dragover-drop-dragend 1 一个div拖到另一个div dragToDrop.html #drop {     width: 300px;     height: 200px;     background-color: #ff0000;     padding: 5px;
js实现拖拽功能(支持左右拖动、删除)
09-20
概述：实现拖拽工作流程配置，可以鼠标左右移动元素，鼠标双击可以删除元素。 基本原理：就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
JS实现拖拽功能
热门推荐
weixin_46831501的博客
03-04 1万+
记录一下新学习到的拖拽功能。 H5新增了一个draggable属性，用于对需要拖拽的元素进行标记，定义了这个属性后就可以定义拖拽事件了。拖拽事件如下图： 接着就是上代码： HTML以及CSS部分：比较简单就不多说了 <div class="wrapper"> <section class="show"> <h1>拖动你喜欢的图片</h1> <div class="tshirt"> <img s
js实现拖拽功能
qq_19820589的博客
03-04 337
js实现拖拽功能
js实现拖拽效果
Eighteen Z
05-18 1461
js实现拖拽效果 借鉴张鑫旭的拖拽功能，感觉不错。 子绝父相样式自己定义好了,引用函数就可以了. var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; }; // 拖拽 v...
js 实现拖拽效果
最新发布
weixin_44244924的博客
03-31 625
js实现拖拽效果
JS——实现拖拽效果
weixin_52148548的博客
02-15 457
思路代码 思路 鼠标在盒子上按下时，准备移动（事件加给物体） 鼠标移动时，盒子跟随鼠标移动（事件添加给页面） 鼠标抬起时，盒子停止移动（事件加给页面） 代码 <style> div{ height: 80px; width: 80px; background-color: darksalmon; margin: auto; position: absolute; } </style>.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值