下面先给大家介绍下js实现的右键菜单功能，具体详情如下所示：这一章解决的问题1、实现右键菜单功能代码。2、阻止默认事件的实际应用。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu { position: fixed; left:0; top:0; width:200px; height: 400px; background-color: blue; display: none; } </style> </head> <body> <div id="menu"> </div> <script type="tex...
本文解决的问题：1、怎样在网页中实现拖曳功能；2、document.documentElement与document.body的区别。 document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。3、getBoundingClientRect().left与offsetLeft的区别。 getBoundingClientRect()用于获取元素的left、to...
var iMouseDown = false; var dragObject = null; var curTarget = null; function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; } } function getMouseOffset(target, ev){ ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - docPos.x, ...
Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因...
New Document body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#FFFFFF; } .over { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#f3f3f3; fi...
body {margin:0px;padding:0px;font-size:12px;text-align:center;} body > div {text-align:center; margin-right:auto; margin-left:auto;} .content{width:900px;} .content .left{ float:left; width:20%; border:1px solid #FF0000; margin:3px; } .content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%} .content .right{float:right;width:20%;border:1px solid #FF0000;margin:3px} .mo{hei...
作者：Tin出处：http://www.blogjava.net/iamtin/archive/2006/04/27/43668.html代码：http://www.blogjava.net/Files/iamtin/google_drag.rar 代码如下:// 工具类，使用Util的命名空间，方便管理 var Util = new Object(); // 获取http header里面的UserAgent，浏览器信息 Util.getUserAgent = navigator.userAgent; // 是否是Gecko核心的Browser，比如Mozila、Firefox Util.isGecko = Util.getUserAgent.indexOf( " ...
javascript 拖拽JavaScript Google IG Drag Demo，非常棒的拖动，准备用于F2Blog新Theme的后台模块设置，之间的拖 动 拖拽效果的页面效果演示地址：http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址：http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理： 关于拖拽的基础，可以参考这篇文章，讲得非常不错。 其实原理很简单，就是把绑定三个事件：onmousedown , onmousemove , onmouseup。 在...
脚本之家 表拖拽效果代码 .mainDiv{padding:1px;overflow:auto;scrollbar-face-color:#DEEAF8;height:auto;width:expression(document.body.clientWidth); } .fixedHeaderTr{height:24px;background:#D0E2FD;color:#000;text-align:center;} .fixedHeaderTd{height:24px;line-height:22px} .relativeTag{height:20px;background-color:#fff;} .relativeTag1{height:20px;background-color:#F5F6F8;} .relativetd{border:1px s...
这个系列文章主要是讲述实现Javascript拖拽功能的基础知识，并将在最后给出一个完整的示例。适合对拖拽完全不懂的人阅读第一篇就先讲讲Javascript中的offsetParent属性吧。 支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+ element.offsetParent Summary offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned c...
Javascript拖拽用到的一些关于位置定位的一些参数在阅读本文之前，请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性，因为循序渐进是一个很好的习惯，值得提倡。好了，看看我们今天的内容吧。 首先让我们先看一看element.offsetLeft属性。 支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+ 定义：返回一个像素数值，它表示当前元素的左边缘到它的offsetParent属性返回...
在阅读本文前，可以先阅读《Javascript拖拽&拖放系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性》这篇文章，以理清上下文关系。好了，让我们开始进入正题。 模型相同的属性/方法 1 Button属性 Integer类型，可读可写。对于特定的鼠标事件，表示按下的鼠标按钮，它可以在拖拽的时候，判断是否是鼠标左键引发mousedown事件。它的所有取值及其意义（参考自《Javascript高级程序设计》）好了，让我们开始进入正题。...
D类 html, body { margin:0; } !!window.__defineGetter__ && !/MSIE/.test(navigator.userAgent) && function () { !window.opera && window.__defineGetter__('event', function () { //兼容Event对象 var o = arguments.callee; do { if (o.arguments[0] instanceof Event) return o.arguments[0]; } while (o = o.caller); return null; }); window.attachEvent = Document.prototype.attachEvent = Element.prototy...
blog body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{ height:320px; list-style:none; margin:40px 50px 0px; padding:0px; } li{ width:100%; height:30px; line-height:30px; font-size:14px; text-align:...
效果预览： 实现源代码： Drag[笑的自然最后修改编辑] [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]