编程 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交换排序冒泡排序算法（Javascript版）

Oct 04 Javascript

javascript实现获取浏览器版本、操作系统类型

Jan 29 Javascript

简单的jQuery入门指引

Jul 28 Javascript

JavaScript检查子字符串是否在字符串中的方法

Feb 03 Javascript

JavaScript实现点击按钮字体放大、缩小

Feb 29 Javascript

jQuery组件easyui对话框实现代码

Aug 25 Javascript

Bootstrap的基本应用要点浅析

Dec 19 Javascript

在node中如何使用 ES6

Apr 22 Javascript

JS实现简单拖拽效果

Jun 21 Javascript

微信小程序tabBar底部导航中文注解api详解

Aug 16 Javascript

vue watch自动检测数据变化实时渲染的方法

Jan 16 Javascript

一个基于react的图片裁剪组件示例

Apr 18 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