编程 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 相关文章推荐

js电信网通双线自动选择技巧

Nov 18 Javascript

jQuery中调用WebService方法小结

Mar 28 Javascript

基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

Apr 26 Javascript

JS获取单击按钮单元格所在行的信息

Jun 17 Javascript

Jquery实现地铁线路指示灯提示牌效果的方法

Mar 02 Javascript

DOM 高级编程

May 06 Javascript

18个非常棒的jQuery代码片段

Nov 02 Javascript

基于JavaScript短信验证码如何实现

Jan 24 Javascript

jQuery实现div横向拖拽排序的简单实例

Jul 13 Javascript

JavaScript数据结构之二叉树的删除算法示例

Apr 13 Javascript

浅谈vue项目重构技术要点和总结

Jan 23 Javascript

Vue使用CDN引用项目组件，减少项目体积的步骤

Oct 30 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