简单表格排序可以双击编辑 自定义编辑后的 规则可拖动列进行列替换可推动边框进行列宽度的缩放代码如下:Tablebody{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp);color:#183C94;word-break:break-all} #tab tbody td{overflow:hidden;...
代码如下:Tablebody{margin:0px; padding:0px; font-size:12px} .div{height:160px;width:160px;position:absolute; text-align:center; } .demo1{ border:1px solid #96C2F1;background-color:#EFF7FF;left:150px;top:20px} .demo2{ border:1px solid #9BDF70;background-color:#F0FBEB;left:450px;top:20px} .demo3{ border:1px solid #BBE1F1;background-color:#EEFAFF;left:750px;top:20px} .demo4{ border:1px solid #96C2F1;...
功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了 奉上源码：代码如下:* { margin: 0px; padding: 0px; } .dragBox { width: 400px; height: 200px; position: absolute; top: 40%; left: 40%; background: #e8e8e8; z-index: 8001; } .dragBox > div { height: 30px; cursor: move; background: #00ff21; position: relative; } .ui-mask { width: 100%; height: 100%; background: #000; position: absolute; top: 0...
今天我们就来解决上一次拖拽雏形中的一些问题。下面看看有哪些问题？ 附上上期的Javascript代码，方便大家查看问题。1. 现在的这个拖拽如果我鼠标移动的快点，你会发现这个鼠标从这个div出来了，这个时候div不会跟着鼠标走了。 那为什么会出现这个问题呢？ 原因其实很简单，mousemove的事件我们是给div加的,所以鼠标一旦脱离了这个div,那么这个时候mousemove已经不触发了。 解决方案： 事件加载document 上,因为你鼠标无论如何都还...
这篇文章主要介绍了Javascript 拖拽雏形(逐行分析代码，让你轻松了拖拽的原理),需要的朋友可以参考下拖拽的原理： 其实就是鼠标与左上角的距离保持不变。我们来看下图： 这红点就是鼠标。拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置，就是这么简单，就是这么任性。 那这个距离怎么求呢？？鼠标的位置-物体位置的差值就是那个距离 是吧。那这个斜线就是横线和竖线组成的。我们距离看下程序怎么做。<p id="p1"></p>实际上...
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的，在这基础上我们加个父级的div，不让他拖出父级。原理和之前的一样，简单吧。 html代码：css代码：#div1 {width: 100px;height: 100px;background: red;position: absolute;}#div2 {width: 400px;height: 300px;background: #CCCCCC;position: relative;}javascript代码：效果图如下：简单吧。 接下来就是如何让他自...
我们看看之前的拖拽在周围有东西的时候会出现什么问题？ 在高级浏览器中不会有啥问题，我们放到IE7下面测试一下，问题就出来了。如图我们可以很清楚的看到，文字都已经被选中了。那这个用户体验很不好，用起来也不方便。顺便提一下，我们之前加了一个return false;帮我们解决了很多问题，如果去掉这个的话,chrome也会出现一样的问题。那么也就是说这个return false;可以解决chrome ff IE9+ 这些浏览器的问题。 实际上在我们开发中，...
今天写了一天这个jquery插件： 可以实现对div进行拖拽来调整大小的功能。代码如下: (function ($) {$.fn.dragDivResize = function () {var deltaX, deltaY, _startX, _startY;var resizeW, resizeH;var size = 20;var minSize = 10;var scroll = getScrollOffsets();var _this = this;for (var i = 0; i < _this.length; i++) {var target = this[i];$(target).on("mouseover mousemove", overHandler);}function outHandler() {f...
本文实例分析了jQuery手机浏览器中拖拽动作的艰难性。分享给大家供大家参考。具体如下： 本想在手机网页中实现一个如iphone可以随意拖动的控制按钮的，但是最后发现竹篮打水一场空， 虽然拖拽动作在手机浏览器中司空见惯，但是在手机浏览器中，要想实现可以被拖拽的组件，却是一件不可能的事情。 先来看看在PC网页中，拖拽动作是怎么做的， 首先，我们有一个按钮，点击有动作，一直按着不放，可以随意拖动，就像iphone可以随意拖动...
首先来了解一下，面向对象练习的基本规则和问题： 先写出普通的写法，然后改成面向对象写法项 普通方法变形 尽量不要出现函数嵌套函数 可以有全局变量 把onload函数中不是赋值的语句放到单独函数中 改成面向对象 全局变量就是属性 函数就是方法 onload中创建对象 改this指针问题 先把拖拽效果的布局完善好： HTML结构：csc样式： #box{position: absolute;width: 200px;height: 200px;background: red;} 第一步，首先把面向过程的拖...
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法。分享给大家供大家参考。具体实现方法如下：代码如下:JavaScript实现文字与图片的拖拽效果*{padding:0;margin:0;} .tips{position:absolute;background:#eee;}图片可以拖动 脚本之家拖动链接也可以var $id=function(id){return document.getElementById(id);} var dragF={locked:false,lastObj:undefined,drag:function(obj){$id(obj).onmousedown=function(e){var e = e e...
本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法。分享给大家供大家参考。具体实现方法如下：代码如下:JS仿iGoogle自定义首页模块拖拽效果var Common = {getEvent: function() {//ie/ffif (document.all) {return window.event;}func = getEvent.caller;while (func != null) {var arg0 = func.arguments[0];if (arg0) {if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object"...
本文实例讲述了JS+CSS实现可拖拽的漂亮圆角特效弹出层的方法。分享给大家供大家参考。具体如下：代码如下:JS+CSS实现的可拖拽的漂亮圆角效果的弹出层body{margin:0px;padding:0px;font-size:14px; } #t {position:absolute;float:left;left:0px;top:0px; } #a {float:left; } .al {opacity: 0.80;filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100); } .al2{opacity: 0.00;filter : progid:...
本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法。分享给大家供大家参考。具体实现方法如下：代码如下:JS弹出可拖拽可关闭的div层html,body{height:100%;overflow:hidden;} body,div,h2{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} center{padding-top:10px;} button{cursor:pointer;} #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -...
本文实例讲述了Js可拖拽放大的层拖动特效实现方法。分享给大家供大家参考。具体实现方法如下：代码如下:Js实现层拖动效果，还可以拖拽放大*{margin:0;padding:0;} #zhezhao{width:100%;height:100%;background:#f00;filter:alpha(opacity:0);opacity:0;z-index:9999;position:absolute;top:0;left:0;display:none; } #div2{width:200px;height:200px;position:relative;background:#EEEEEE;border:1px solid #f00; } #div1{width:1...