jquery实现拖拽

Question

本帖最后由 zhyb0807508205 于 2011-07-20 22:08:20 编辑

Answer 1

参考：
http://www.cnblogs.com/ljchow/archive/2010/04/27/1721695.html

Answer 2

不是很适合我的需求，我要拖动的是几个Table,每个Table有id：11，12，21，22，31，32
保存的位置使用Table的id

Answer 3

参考：
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/

Answer 4

参考：
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/

Answer 5

//设置一个全局变量。
var isDrag=false;
//在被拖动目标上绑定  mousedown 事件，并且把 isDrag=true;
    this.dragStart=function (e) {
isDrag=true;
_cX=e.pageX;
_cY=e.pageY;
_dX=_cX-ThisO.offset().left;
_dY=_cY-ThisO.offset().top;
_pX=hide_panel.offset().left;
_pY=hide_panel.offset().top;
$(document).mousemove(This.dragMove);
$(document).mouseup(This.dragStop);
}
//拖动中 this.dragMove=function (e) {
if(_drag){
_cX=e.pageX;
    _cY=e.pageY;
_tX=(_cX-_dX-_pX);
_tY=(_cY-_dY-_pY);
_nX=_cX-_dX-design_panel.offset().left;
_nY=_cY-_dY-design_panel.offset().top;
//以下部分代码为现在图片拖拽范围，请勿修改！
if(_tX<=0-allow_ds){
_tX=0-allow_ds;
_nX=0-allow_ds+ThisO.css('left');
}
if(_tY<=0-allow_ds){
_tY=0-allow_ds;
_nY=0-allow_ds+ThisO.css('top');
}
if(_tX+ThisO.width()-allow_ds>=hide_panel.width()){
_tX=hide_panel.width()-ThisO.width()+allow_ds;
_nX=design_panel.width()-ThisO.width()-ThisO.css('left')+allow_ds;
}
if(_tY+ThisO.height()-allow_ds>=hide_panel.height()){
_tY=hide_panel.height()-ThisO.height()+allow_ds;
_nY=design_panel.height()-ThisO.height()+allow_ds;
}
ThisO.css({'left':_nX,'top':_nY});
if(options.mainFlag){
$(options.mainTag).css({'left':_tX,'top':_tY});
}else{
$(options.mainTag).css({'left':_nX,'top':_nY});
}
}
}
//拖动结束
this.dragStop=function (e) {
if(_drag){
_drag=false;
_cX=e.pageX;
    _cY=e.pageY;
_tX=(_cX-_dX-_pX);
_tY=(_cY-_dY-_pY);
$(document).unbind('mousemove');
$(document).unbind('mouseup');
options.finish(_tX,_tY);
}
}

Answer 6

用jquery-ui的draggable，有大量丰富的api，毕竟是官方给的

Answer 7

参照：
http://www.cnblogs.com/jikey/archive/2010/08/23/1806059.html