jquery div拖动效果示例代码
2023-09-11 14:16:36 时间
1 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>拖动DIV</title> 7 8 <style type="text/css"> 9 .show{ 10 background:#7cd2f8; 11 width:100px; 12 height:100px; 13 text-align:center; 14 position:absolute; 15 z-index:1; 16 left:100px; 17 top:100px; 18 } 19 </style> 20 21 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/165/x9ajweu6/1.5_jquery.min.js"></script> 22 <script type="text/javascript"> 23 $(document).ready(function(){ 24 $(".show").mousedown(function(e){ //e鼠标事件 25 $(this).css("cursor","move");//改变鼠标指针的形状 26 27 var offset = $(this).offset();//DIV在页面的位置 28 var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 29 var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 30 $(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 31 $(".show").stop();//加上这个之后 32 33 var _x = ev.pageX - x;//获得X轴方向移动的值 34 var _y = ev.pageY - y;//获得Y轴方向移动的值 35 36 $(".show").animate({left:_x+"px",top:_y+"px"},10); 37 }); 38 }); 39 40 $(document).mouseup(function(){ 41 $(".show").css("cursor","default"); 42 $(this).unbind("mousemove"); 43 }); 44 }); 45 </script> 46 </head> 47 <body> 48 <div class="show"> 49 jquery实现DIV层拖动 50 </div> 51 </body> 52 </html>
相关文章
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- 7个jquery easy ui 基本组件图解
- 基于jquery实现的上传图片及图片大小验证、图片预览效果代码!
- Js和Jquery中ajax返回JSON格式的两种方法!(各有示例代码)
- eclipse安装spket插件提示js和jQuery代码
- jQuery-ui datepicker的使用演示代码
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
- jQuery 图片剪裁插件初探之 Jcrop
- jQuery 选择器实例
- jquery-lazyload延迟加载图片 及 加载顺序 bug 修复
- 《众妙之门——JavaScript与jQuery技术精粹》——2.2 在哪里可以使代码得到复查?
- 《jQuery Cookbook中文版》——1.2 在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码
- Android+Jquery Mobile学习系列(9)-总结和代码分享
- jquery中Live方法不可用,Jquery中Live方法失效
- Jquery_jquery中attr和prop的区别
- 使用jQuery中ajax实例
- 最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回