javascript 实现拖动

最新推荐文章于 2023-03-31 21:28:59 发布

yinxubest87

最新推荐文章于 2023-03-31 21:28:59 发布

阅读量657

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript function div xhtml server html

本文链接：https://blog.youkuaiyun.com/yinxubest87/article/details/1958708

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的拖拽元素与物理模拟的方法。通过监听鼠标事件，实现了元素的自由拖拽，并且加入了物理属性如重力、阻尼等来模拟现实世界中的物理效果。

<%@ 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" onmousedown="divBlock_event_mousedown();">I am a div.</div>
<script>
function divBlock_event_mousedown(){
document.onmousemove=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.onmousemove="";
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.onmousemove=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.onmousemove="";
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" onmousedown="divBlock_event_mousedown(arguments[0]);"></div>
</div>
<script>
f=0.95; // 运动阻尼
k=0.85; // 碰撞弹性系数
g=1; // 重力加速度

window.onload=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.onload=init;

<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.onload=init;

window.onload=init;

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

window.onload=init;

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.onmousemove=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;
}