js实现拖动div但效果很卡

河鲜鱼 2011-05-23 11:01:45

在拖动div的时候
点击div 然后就可以拖动但是在拖动的时候很卡鼠标移动太快 div就会停在那里不跟着鼠标移动
如果再次点击刚才拖动的div 随意拖动都不会卡
到底是哪里出了问题呢？
//js代码--------------------------------------------------------------------------
$(document).ready(function() {
var p1=new Endrag('section-head', 'section','inner-section');
});

function Endrag(source,target,innermove){
innermove=typeof(innermove)=="object" ? innermove:document.getElementById(innermove);
var x0=0,y0=0,moveable=false,index=100,NS=(navigator.appName=='Netscape');
if($('#' + source)){
//鼠标点击div
$('#' + source).mousedown(function(e){
var event_mousedown = e;
if (e.target.className == '') {
location.href = e.target.href;
return;
}
everdivheight = $('#' + target).height();
$('#' + target + ' .progress-indicator').show();
$('#' + target).css('background','#ddd').css('color','#ddd').css('position','relative');
everdivhtmlheader = $('#' + target + ' .show-div-h').html();
everdivhtmlcontent = $('#'+target+ ' .show-div-c').html();
$('#' + target + ' .show-div-h').html('');
$('#' + target + ' .show-div-c').html('');
$('#' + target).css('height', everdivheight);
e = e ? e : (window.event ? window.event : null);
if(e.button==(NS)?0 :1) {
if(!NS){this.setCapture();}
x0 = e.pageX ;
y0 = e.pageY ;
moveable = true;
}

});
//拖动;
var position_top = 0;
var position_now_top = 0;
$('#'+source +'-inner').mousemove(function(e){
e = e ? e : (window.event ? window.event : null);
if(moveable){
innermove.style.left = (e.pageX-x0 ) +"px";
innermove.style.top = (e.pageY-y0 ) +"px";
if(position_top == 0) {
position_top = innermove.style.top;
position_top = parseInt(position_top.replace('px',''));
}
position_now_top = innermove.style.top;
position_now_top = parseInt(position_now_top.replace('px',''));
}
position_top = position_now_top;
});
//停止拖动;
$('#'+source+'-inner').mouseup(function (e){
if(moveable) {
if(!NS){this.releaseCapture();}
moveable = false;
}
$('#'+target +' .progress-indicator').animate({left: 0,top: 0},"slow","",function(){
$(this).hide();
$('#'+target).css('background','').css('color','').css('position','static');
$('#'+target+' .show-div-h').append(everdivhtmlheader);
$('#'+target+' .show-div-c').append(everdivhtmlcontent);

});
});
}
}
html代码----------------------------------------------------------------------------------
<div id="section" class="section moved" >
<div id="section-head" class="header show-div-h">
<h2 class='title-other'>简介
</h2>
</div>
<div class="content show-div-c">

<div class="profile-supply">
<h3>专长</h3>
<p>

</p>
</div>
</div>
<div class="progress-indicator" id="inner-section">
<div id="section-head-inner" class="header">
<h2 class='title-other'>简介

</h2>
</div>
<div class="content">

<div class="profile-supply">
<h3>专长</h3>
<p>

</p>
</div>
</div>
</div>
</div> 
---------------------------------------------------------------------------------------
跪求解答！！！！

...全文

1434 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

河鲜鱼 2011-05-24

打赏
举报

[Quote=引用 13 楼 shadowwayne 的回复:]

希望这个能给你帮助http://www.cnblogs.com/rubylouvre/archive/2009/09/09/1563342.html
[/Quote]谢谢你这个对我大有帮助解决了我一半的问题了

mark620 2011-05-23

打赏
举报

友情帮顶！

shadowwayne 2011-05-23

打赏
举报

希望这个能给你帮助http://www.cnblogs.com/rubylouvre/archive/2009/09/09/1563342.html

河鲜鱼 2011-05-23

打赏
举报

[Quote=引用 11 楼 happy175 的回复:]

我这提供两个效果，都是拖动DIV的，而且很兼容：

1、仿iGoogle自定义首页模块拖拽效果（推荐），此效果有记忆功能，可记录以前移动的位置
http://www.websjy.com/bbs/viewthread.php?tid=4261

2、javascript实现可以拖动的层示例(层拖动，兼容IE/FF)

http://www.websjy.com/bbs/viewth……
[/Quote]谢谢你给的参考但是我有参考拖起卡的不卡的我都有我就是仿照不卡的写的写出来就卡了不知道为什么帮我看看源码吧

小真子 2011-05-23

打赏
举报

我这提供两个效果，都是拖动DIV的，而且很兼容：

1、仿iGoogle自定义首页模块拖拽效果（推荐），此效果有记忆功能，可记录以前移动的位置
http://www.websjy.com/bbs/viewthread.php?tid=4261

2、javascript实现可以拖动的层示例(层拖动，兼容IE/FF)

http://www.websjy.com/bbs/viewthread.php?tid=2665

河鲜鱼 2011-05-23