最近发现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){ _...
相对于上一篇，优化了拖拽的效果。 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种可能。一种新建一个区域，就类似“华东交通...
本例是个非常简单的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...
iDrag & iDialog 介绍特点：iDialog.js依赖于jquery编写的简单易用的对话框，同时还可以通过添加css3，改变对话框的展现动画。提供了两个方法： ?1、拖拽函数 iDrag() 或 $.drag();?2、对话框函数 iDialog() 或 $.dialog(); 跨平台兼容:兼容：IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。 渐进增强的体验:确保IE家族功能完善的前提下，现代浏览器适当的...
思路是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置，分别是 1、组件左上角与屏幕左上角的相对位置 2、鼠标所在坐标与组件左上角的相对位置。 具体函数如下： 代码如下: .drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; } 代码如下: $(document).ready(function(){ var move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(".drag").mousedown(functio...
在网页上我们经常看到，当点击一个按钮时，弹出一个自定义窗口，并且可以随意的拖拽，从而改变其位置 使用jquery实现拖拽，则必须要jquery的文件了，实现步骤： 1、引入jquery文件 2、编写js脚本 具体代码： html代码： 代码如下: 显示 X css样式： 代码如下: .win{width:500px;height:600px;background:#000000;border-radius:8px;box-shadow:0px 0px 5px 10px;opacity:0.8;position:absolute;left:0;top:0;display:none} ...
使用DIV弹出窗口来动态显示内容的原理：首先采用CSS和HTML隐藏弹窗中的内容，然后利用JavaScript（本教程中是JQuery）来动态显示它们。这种效果不仅能够充分利用有限的版面空间，而且能够提高用户体验；更重要的是，它并不影响SEO效果（因为它实际存在于页面中，只是初始为不可见状态） 1、在html页面中定义一个div，并在div实现我们需要展示的内容。 代码如下: 网站登录 注册新用户 | 忘记密码？ 一图抵千言。让我们看看这...
本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。 代码如下：.resizeDivClass { position:absolute; background-color:gray; width:2px; height:15px; z-index:1px; display: block; cursor:e-resize } .td1 { font-size: 12px; white-space:nowrap; color:#0000ff...
功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了 奉上源码：代码如下:* { 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...
今天写了一天这个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可以随意拖动...
示例参考http://jsfiddle.net/KyleMit/Geupm/2/ （这个站需要FQ才能看到效果） 其实是jqueryUI官方购物车拖拽添加例子的增强版，就是在拖拽的时候增加了排序 这个是html代码代码如下:ProductsT-ShirtsLolcat ShirtCheezeburger ShirtBuckit Shirt BagsZebra StripedBlack LeatherAlligator Leather GadgetsiPhoneiPodiPadShopping CartAdd your items here这个是js代码主要在js代码中红色代码部分设置了可以拖动进入时就排序，橙色...