<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript" src="jquery.js" language="javascript"></script><title>JS模拟拖拽</title><style type="text/css">*{ margin:0px; padding:0px;}#box{ width:150px; height:100px; border:3px solid #06C; overflow:auto; margin:70px auto; position:absolute;}#topBar{ width:150px; height:70px; background:#FF9;}</style><script type="text/javascript"> var this_x=0,this_y=0; //记录鼠标开始时相对于拖放对象的位置var drag_x=0,drag_y=0; //记录拖拽对象的位置var mouse_x=0,mouse_y=0; //记录鼠标的位置var flag=false; //判断是否拖动 $(document).ready(function() { //鼠标按下，开始拖拽$("#box #topBar").mousedown(function(event){ ready_drag(event);});//停止拖拽$(document).mouseup(function(){ //alert("ss"); flag=false; $("#value").html("当前状态：拖放结束"); $("#topBar").css("cursor","default");})});function ready_drag(event){ $("#value").html("当前状态：开始拖放"); $("#topBar").css("cursor","move"); flag=true; mouse_x=event.clientX; mouse_y=event.clientY; var drag=$("#box"); //获取拖拽对象相对于页面的位置 drag_x=drag.attr("offsetLeft"); drag_y=drag.attr("offsetTop"); //得到鼠标相对于拖拽对象的位置 this_x=mouse_x-drag_x; this_y=mouse_y-drag_y; //鼠标移动开始执行拖拽程序 $(document).mousemove(function(event){ if(flag==true) { drag_start(this_x,this_y,event); } }) } function drag_start(this_x,this_y,event){ var mouse_x=event.clientX; var mouse_y=event.clientY; drag_x = mouse_x-this_x; drag_y = mouse_y-this_y; $("#value").html("鼠标的位置：X:"+mouse_x+"Y:"+mouse_y+""); $("#box").css("left",drag_x); $("#box").css("top",drag_y-50);}</script></head><body> <div id="box"> <div id="topBar"> </div> </div> <div id="value"></div></body></html>
这是我做的一个简单的拖拽（的确是很简单。。。），但是出现了点问题：
1. 就是第二次拖拽的时候就不成功了（此问题出现在火狐上），这是什么原因呢？
2.为什么拖拽对象的位置变化比鼠标的慢呢？？在ie上还会很卡，代码应该怎么优化呢？
谢啦~~~~
添加回答
举报
0/150
提交
取消