Javascript简单实现可拖动的div_javascript技巧

复制代码 代码如下:

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

时间: 2024-11-08 22:18:43

Javascript简单实现可拖动的div_javascript技巧的相关文章

JavaScript简单实现鼠标拖动选择功能_javascript技巧

复制代码 代码如下: <style><!--body{padding-top:50px;padding-left:100px;padding-right:150px;}  .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;} 

JavaScript简单实现鼠标拖动选择功能

 本篇文章主要是对JavaScript简单实现鼠标拖动选择功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <style><!-- body{padding-top:50px;padding-left:100px;padding-right:150px;}   .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;bo

JavaScript简单的鼠标拖动实例:自动吸附实例

文章简介:JavaScript鼠标拖动+自动吸附实例. 学了几天的JavaScript,自己动手做了一个简单的鼠标拖动的实例,拖动过程中科自动检测与目标容器的距离,在一定的距离范围内可以自动将被拖动的元素加入到目标容器中,希望对开始学习javascript的童鞋有用-- 先看看效果图(Chrome.FireFox.Opera.Safari.IE9测试通过): 效果图(虚线框:目标对象 蓝色填充透明框:临时拖动对象 红色填充框:被拖动对象) 主要思路:首先给要拖动的div添加一个鼠标按下(mous

JS实现超简单的鼠标拖动效果_javascript技巧

本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo

基于javascript简单实现对身份证校验_javascript技巧

本文实例介绍了javascript简单实现对身份证的校验的关键性代码,分享给大家供大家参考,具体内容如下 var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古", 21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏", 33:&qu

JavaScript简单修改窗口大小的方法_javascript技巧

本文实例讲述了JavaScript简单修改窗口大小的方法.分享给大家供大家参考.具体如下: function resize_window(){ // move the window to 0,0 (X,Y) window.moveTo(0, 0); // resize the window to 800x600 window.resizeTo(800, 600); } resize_window(); 希望本文所述对大家的javascript程序设计有所帮助. 以上是小编为您精心准备的的内容,在

教你使用javascript简单写一个页面模板引擎_javascript技巧

于是我又想着能不能写一些简单的代码来完善这个模板引擎,又能与其它现有的逻辑协同工作.AbsurdJS本身主要是以NodeJS的模块的形式发布的,不过它也会发布客户端版本.考虑到这些,我就不能直接使用现有的引擎了,因为它们大部分都是在NodeJS上运行的,而不能跑在浏览器上.我需要的是一个小巧的,纯粹以Javascript编写的东西,能够直接运行在浏览器上.当我某天偶然发现John Resig的这篇博客,我惊喜地发现,这不正是我苦苦寻找的东西嘛!我稍稍做了一些修改,代码行数差不多20行左右.其中的

使用Javascript简单实现图片无缝滚动_javascript技巧

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: 先睹为快:demo 复制代码 代码如下: <!DOC

JavaScript简单下拉菜单特效_javascript技巧

本文实例为大家分享了js下拉菜单特效,供大家参考,具体内容如下 实例1:联动的省市下拉菜单 onchange 事件会在域的内容改变时发生. <script type="text/javascript"> var arr = new Array(); //数据数组 //定义数据,结构为:id.名字.父id arr[arr.length] = [1, '北京市', null]; arr[arr.length] = [2, '四川省', null]; arr[arr.length