这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现的简练高效拖拽功能, 通过对 js 鼠标事件的扩展实现拖拽效果, 非常简单实用, 需要的朋友可以参考下
本文实例讲述了 js 实现的简练高效拖拽功能。分享给大家供大家参考,具体如下:
运行效果图如下:
具体代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" charset="utf-8" />
- <meta http-equiv="content-type" content="text/html" />
- <title>
- demo
- </title>
- </head>
- <body>
- <p>
- aaaaaaaaaaa
- </p>
- <div id="one" style="height:100px;width:100px;background:red;position:absolute;">
- </div>
- <script>
- var odiv = document.getElementById("one");
- dra(odiv);
- function dra(obj) {
- obj.onmousedown = function(e) {
- var oe = e || window.event;
- var $this = this;
- var l = oe.clientX - $this.offsetLeft;
- var t = oe.clientY - $this.offsetTop;
- document.onmousemove = function(e) {
- var oe = e || window.event;
- var ol = oe.clientX - l;
- var ot = oe.clientY - t;
- if (ol < 0) ol = 0;
- if (ot < 0) ot = 0;
- if (ot > document.documentElement.clientHeight - $this.offsetHeight) ot = document.documentElement.clientHeight - $this.offsetHeight;
- if (ol > document.documentElement.clientWidth - $this.offsetWidth) ol = document.documentElement.clientWidth - $this.offsetWidth;
- $this.style.left = ol + "px";
- $this.style.top = ot + "px";
- }
- document.onmouseup = function() {
- document.onmousemove = null;
- document.onmouseup = null;
- if ($this.releaseCapture) $this.releaseCapture();
- }
- if ($this.setCapture) {
- $this.setCapture();
- }
- if (oe.preventDefault) oe.preventDefault();
- else oe.returnValue = false;
- return false;
- }
- }
- </script>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0711/329339.html