您的位置：首页 > Web前端 > JQuery

Jquery实现鼠标拖拽效果

2014-03-29 14:52 573 查看

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page">  </head> <style> .Drigging{ width:200px; background:#CCC; border:solid 1px #666; height:80px; line-height:80px; text-align:center; position:absolute; } </style> <script type="text/javascript" src="<%=basePath%>js/jquery-1.9.0.js"></script> <script type="text/javascript"> $(function(){ var bool=false; var offsetX=0; var offsetY=0; $(".Drigging").mousedown(function(){ bool=true; offsetX = event.offsetX; offsetY = event.offsetY; $(this).css('cursor','move'); }) .mouseup(function(){ bool=false; });$(document).mousemove(function(e){ if(!bool) return; var x = event.clientX-offsetX; var y = event.clientY-offsetY; $(".Drigging").css("left", x); $(".Drigging").css("top", y); });}); </script> <body> <div class="Drigging">终于可以拖动啦,其实很简单</div></body></html>

来自为知笔记(Wiz)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航