当前位置:  编程技术>jquery

jquery div拖拽效果(兼容浏览器)

    来源: 互联网  发布时间:2014-10-04

    本文导语:  例子,jquery实现div拖拽。 1,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坐标 $(docu...

例子,jquery实现div拖拽。

1,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(){
_IsMove=0;
$(_MoveObj).removeClass("downMouse");
}); //实现div拖拽效果
return $(this).bind("mousedown",function(e){
_IsMove=1;
_MoveObj = this;
var offset =$(this).offset();
_MouseLeft = e.pageX - offset.left;
_MouseTop = e.pageY - offset.top;
z_index++;
_MoveObj.style.zIndex=z_index;
$(_MoveObj).addClass("downMouse");
});
}

2,html代码:
 

代码示例:



demo.htm div拖拽效果_www.




.myDiv{
background:#EAEAEA;
width: 100px;
height: 100px;
border: 1px solid;
cursor: pointer;
text-align: center;
line-height: 100px;
}
.downMouse{
cursor:move;
filter:alpha(Opacity=80);
-moz-opacity:0.5;
opacity: 0.5;
background-color:#ffffff;
}


$(function(){
$(".myDiv").myDrag();
//$("#myDiv2").myDrag();
})



拖拽1

拖拽2

拖拽3

拖拽4

拖拽5

拖拽6




    
 
 

您可能感兴趣的文章:

  • Jquery实现侧边栏跟随滚动条固定(兼容IE6)
  • jquery返回顶部效果(兼容IE6)的实现代码
  • jquery分页插件jpaginate在IE中不兼容问题
  • 在jquery中combobox多选的不兼容问题总结
  • 通过pjax实现无刷新翻页(兼容新版jquery)
  • jQuery.event兼容各浏览器的event详细解析
  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
  • jquery 选中checkbox兼容问题如何解决?
  • jquery禁用右键、文本选择功能、复制按键的代码(兼容多浏览器)
  • jQuery右下角弹出广告代码兼容多浏览器
  • JS遮罩层效果(兼容ie firefox) jQuery遮罩层实例
  • jquery 密码强度验证代码(兼容IE,火狐,谷歌)
  • jquery 导航菜单代码(兼容IE6,IE7,FF等)
  • jQuery文件浏览器插件 jQuery File Tree
  • jquery检测浏览器名称和版本信息的例子
  • jquery判断浏览器后退时候弹出消息的方法
  • jquery浏览器判断函数代码
  • Jquery 获取浏览器的宽度与高度
  • jquery判断浏览器后退时弹出消息的例子
  • 浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
  • jquery判断浏览器类型($.browser用法)
  • jquery代码-如何检测各种浏览器
  • Jquery $.browser判断浏览器信息的方法介绍
  • jquery代码:多浏览器捕捉回车事件
  • JQuery判断浏览器类型与版本
  • jquery判断浏览器版本示例
  • jquery与js判断浏览器版本
  • jquery1.9 下检测浏览器类型和版本的方法
  • jquery动态调整div大小使其宽度始终为浏览器宽度
  • Jquery判断浏览器类型实例代码
  • Jquery获取浏览器分辨率的代码与说明
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery照明效果插件 jQuery Photon
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery盖章效果插件 jquery.stamper
  • jQuery卷页效果 jQuery Page Peel
  • 链接渐变效果 jQuery glow
  • jQuery的效果集工具包 Glimmer
  • jQuery Lightbox效果插件 Boxer
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery电梯式滚动效果插件 Ascensor
  • jQuery 页面动画效果 Animsition
  • jQuery 幻灯片效果插件 plusview
  • jQuery图片效果切换 Adipoli
  • jQuery 幻灯效果显示插件 Diapo
  • jQuery文本效果插件 Textualizer
  • jQuery在iPhone/iPad的滚动效果处理 Overscroll
  • jQuery轮盘效果插件 Roundabout
  • 浙ICP备11055608号-3 iis7站长之家
  • jQuery图片缩放效果 FancyZoom
  • jQuery图片幻灯手风琴效果插件 Slidorion
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3