编程 Javascript

Javascript简单实现可拖动的div

Posted in Javascript onOctober 22, 2013

<html> 
<head> 
<script type="text/javascript"> 
var x; 
var y; 
function $(id) 
{ 
return document.getElementById(id) 
} 
function mousedown() 
{ 
x=event.clientX-$("px").style.pixelLeft; 
y=event.clientY-$("px").style.pixelTop; 
$("px").style.border="2px solid red"; 
$("px").onmousemove = mousemove; 
} 
function mouseup() 
{ 
$("px").onmousemove = ""; 
$("px").style.border=""; 
} 
function mousemove() 
{ 
$("px").style.pixelLeft=event.clientX-x; 
$("px").style.pixelTop=event.clientY-y; 
} 
</script> 
</head> 
<body> 
<div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;" 
onmousedown="mousedown()" onmouseup="mouseup()" > 
</div> 
</body> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery中add实现同时选择两个id对象

Oct 22 Javascript

js匿名函数的调用示例(形式多种多样)

Aug 20 Javascript

第二次聊一聊JS require.js模块化工具的基础知识

Apr 17 Javascript

yarn与npm的命令行小结

Oct 20 Javascript

使用Node.js给图片加水印的方法

Nov 15 Javascript

详解js中call与apply关键字的作用

Nov 21 Javascript

基于Bootstrap和jQuery构建前端分页工具实例代码

Nov 23 Javascript

es6 symbol的实现方法示例

Apr 02 Javascript

layui实现二维码弹窗、并下载到本地的方法

Sep 25 Javascript

Vue混入mixins滚动触底的方法

Nov 22 Javascript

vue中根据时间戳判断对应的时间(今天昨天前天)

Dec 20 Javascript

JavaScript实现alert弹框效果

Nov 19 Javascript

将两个div左右并列显示并实现点击标题切换内容

Oct 22 #Javascript

简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器

Oct 22 #Javascript

js单例模式的两种方案

Oct 22 #Javascript

JavaScript中“过于”犀利地for/in循环使用示例

Oct 22 #Javascript

点击按钮或链接不跳转只刷新页面的脚本整理

Oct 22 #Javascript

Javascript实现真实字符串剩余字数提示的实例代码

Oct 22 #Javascript

用js的for循环获取radio选中的值

Oct 21 #Javascript