js拖拽 采用简单的闭包实现方式 代码如下: /** * Created with JetBrains WebStorm. * User: lsj * Date: 12-11-24 * Time: 下午12:59 * To change this template use File | Settings | File Templates. */ var dragmanager=(function() { //标识移动元素z轴坐标 var index_z=1; //当前的拖拽元素 var drganow; //移动标识符号 var dragbegin=false; //鼠标点击时距离div左边距离 var relativex=0; //鼠标点击时距离div上边距离 ...
代码如下: body{ font:12px/1.5 Tahoma; } #gannt_left{ width:500px; } #left-scroll-panel{ width:520px; height:100px; overflow-y: auto; } table{ table-layout:fixed; border-collapse: collapse; border-spacing: 0px; text-align:center; width:500px; } table,th,td{ border:1px solid #afe0ea; } th,td{ height:20px; line-height:20px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap...
"元素拖拽改变大小"其实和"元素拖拽"一个原理，只是所动态改变的对象不同而已，主要在于 top、left、width、height 的运用，相对实现起来也非常容易。以下附出源码原型，弄明白了原理再扩展其他实际应用，思路就变得简单、清晰得多了 下面是 JavaScript Code 代码如下: /* * jQuery.Resize by wuxinxi007 * Date: 2011-5-14 */ $(function(){ //绑定需要拖拽改变大小的元素对象 bindResize(document.getElementById('test')); })...
完美拖拽 html,body{overflow:hidden;} body,div,h2,p{margin:0;padding:0;} body{color:#fff;background:#000;font:12px/2 Arial;} p{padding:0 10px;margin-top:10px;} span{color:#ff0;padding-left:5px;} #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;} #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid...
代码如下: JS+CSS制作的DIV层最小化和随意拖拽排序功能 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 #66...
代码如下: /* 拖拽流程： 1、第一步点击需要拖动的元素 2、在点击下的元素被选中，进行move移动 3、当鼠标弹起的时候，停止动作 4、点击元素oDIV的时候，可用的是oDIV区域，而move和up则是全局区域，也就是整个文档通用，即应该用document */ oDIV = document.getElementById("gaga"); oDIV.onmousedown = function( e ){ // 当鼠标点击下去的时候 var diffX = e.clientX - oDIV.offsetLeft; // 点击的位置距离浏览器最左边的位置(...
有一段时间没更新博客了，都不知道忙些什么，学习也没什么进展，惭愧。 这一周空闲的时间学着自己写一下JQ插件。以前用原生的JS做过类似拖拽div的效果，现在按原思路改做成一个JQ的小插件，当作制作JQ插件的一个小练习。 html为 代码如下: *{margin:0;padding:0;} #box{width:500px;height:500px;margin:200px auto;position:relative;border:1px solid #ccc;border-left:2px solid #ccc;} .float-box{width:100px;height:1...
最近发现web网页的拖拽效果，个人觉得是一种不错的用户体验，抽空研究了一下，原理还蛮简单的，下面贴一下我写的一个简单拖拽jquery自定义函数。 jquery代码:fun.js 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind("mousemove",function(e){ if(_IsMove==1){ $(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); } }).bind("mousedown",function(e){ _...
演示地址： http://www.ihuxu.com/project/gcdmove/调用示例： var GCDM = gcdMove(oDiv,100,0); GCDM.startMove();//开始运动 GCDM.stopMove();//结束运动 该段JS代码已经封装好了，代码如下： 简要说明 - obj为要改动的对象元素，通常为某个div；iSpeedX，iSpeedY为div出师的横向（右侧），竖向（下）的初始速度，当然也可以设为零。 代码如下: /** * @Desc 重力碰撞拖拽运动 - Gravity Crash Drag Move(gcdMove) * @Author Gen...
相对于上一篇，优化了拖拽的效果。 js代码:fun.js 代码如下: _MoveObj = null;//全部变量，用来表示当前div z_index = 0;//z方向 jQuery.fn.myDrag=function(){ _IsMove = 0; //是否移动 1.移动 _MouseLeft = 0; //div left坐标 _MouseTop = 0; //div top坐标 $(document).bind("mousemove",function(e){ if(_IsMove==1){ $(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); } }).bind("mouseup",function(){...
在页面上导入js 代码如下:jquery-1.3.2.min.jsjquery.tablednd_0_5.js注意：一定要先导入jquery-1.3.2.min.js 否则出错。建table 代码如下: 1Onesome text 2Twosome text 3Threesome text 4Foursome text 5Fivesome text 6Sixsome text插入js代码 代码如下: $(document).ready(function() { $("#table-1").tableDnD(); }); ·ok。·例子 代码如下: String path = request.getContextPath(); Str...
在以前的文章中我已经介绍了web开发中基本拖放原理，现在给出需要完成的功能。最后运行的效果如下图所示： 主要功能需求说明：1.左侧的元素结构最后会通过Ajax call服务器的数据来生成，能支持多级元素。父节点可以折叠起来 2.用户可以通过拖放的操作，将元素从左侧拖放到右侧。如果是拖的父节点元素，那么需要把它子节点的元素一并拖到右边 3.元素放到右侧，右侧可以接受元素的区域有2种可能。一种新建一个区域，就类似“华东交通...
---------------------GRID拖拽行的实例代码 单行拖拽--------------------------------------- 代码如下://创建第一个GRIDvar firstGrid = new Ext.grid.GridPanel({ddGroup : secondGridDdGroup,//这里是第二个GRID的ddGroupstore : firstGridStore,enableDragDrop : true,//True表示启动对于GridPanel中选中行的拖动行为……其他属性省略}); //创建第二个GRIDvar secondGrid = new Ext.grid.GridPanel({ddGroup : firstG...
本例是个非常简单的div拖动，有需要的朋友可根据自己的需求，添加相应的代码。欢迎拍砖 代码如下: div width resize <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></ script> function bindResize(el) { //初始化参数 var els = document.getElementById('menu').style; //鼠标的 X 和 Y 轴坐标 x = 0; //邪恶的食指 $(el).mousedown(function (e) { //按下元素后，计算当前鼠标与对象...
代码如下:;(function($){$.fn.extend({"jlzindex" : function(){ //用于判断和设置各个对话框的z-indexvar $dragindex = $(this);var arrzindex = new array();for(var i=0; i < $dragindex.length; i++){ //初始化数组元素值，并按拖拽项顺序设置z-index值var zidxnum = 10000 - i - i -2;arrzindex[i] = {"getid":"drag" + ($dragindex.length - i),"zidx":zidxnum};$("#drag" + ($dragindex.length - i)).css("z-index",zidxnum...