jquery实现div的拖动

来源：互联网发布：edg官方淘宝编辑：程序博客网时间：2024/05/01 09:52

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="./jquery-1.8.2.min.js"></script><title>Insert title here</title><style type="text/css">#two{position: absolute;left: 200px;top: 200px;z-index: 2;}#two2{position: absolute;left: 150px;top: 150px;z-index: 1;}</style></head><body><div id="two" style="background-color: red; width: 100px; height: 100px"></div><div id="two2" style="background-color: blue; width: 100px; height: 100px"></div><script type="text/javascript">$(document).ready(function(){var x,y,z_index,down=false,top,left;$("div").bind({ mousedown:function(event){z_index = $(this).css("z-index");$(this).css("z-index","100");x = event.offsetX;y = event.offsetY;down = true; }, mousemove:function(event){if(down==true){left = event.clientX - x;$(this).css("left",left);top = event.clientY - y;$(this).css("top",top);} }, mouseup:function(){down = false;$(this).css("z-index",z_index); }});});</script></body></html>

框架框架我不知道，好用就行。