python 输入框拖动随意摆放_用JQUERY实现的可拖动左右摆放，随意移动位置的图层特...

用JQUERY实现的仿Google首页拖动特效

#div_width{

width:98%;

margin:0 auto;

}

*{

margin:0px;

padding:0px;

}

#div_left,#div_right,#div_center{

float:left;

width:28%;

height:900px;

margin:0 3px;

}

#div_center{

width:38%;

}

.can_move{

border:1px solid blue;

width:100%;

margin:5px 0;

min-height:150px;

}

.center_width{

height:200px;

}

p{

height:30px;

color:#fff;

line-height:30px;

background:#000;

cursor:move;

}

#xuxian{ /*虚线框*/

border:1px dashed #000;

margin:5px 0;

}

//

window.οnlοad=function(){

var mouse_down=false; //鼠标时候按下

var x_old=null; //按下鼠标时鼠标的坐标

var y_old=null;

var div_move=null; //正在移动的div

var div_move_width=null; //正在移动的div的宽

var div_move_height=null; //正在移动的div的高

var xuxian="

document.οncοntextmenu=new Function('event.returnValue=false;'); //禁止右键

document.onselectstart=new Function('event.returnValue=false;'); //禁止选中

//当鼠标按下的时候

$("p").mousedown(function(e){

mouse_down=true; //鼠标按下

div_move=$(this).parent(); //指定当前div为正在移动的div

div_move_width=div_move.width();

div_move_height=div_move.height();

x_old=e.pageX-$(this).offset().left; //获取鼠标坐标

y_old=e.pageY-$(this).offset().top;

//把当前div的position改成absolute

div_move.css({

position:'absolute',

zIndex:'10',

width:div_move_width,

height:div_move_height,

top:div_move.offset().top,

left:div_move.offset().left

});

//将虚线框添加到正在移动的div之前的位置

div_move.before(xuxian);

$("#xuxian").css({

width:'100%',

height:div_move_height

});

});

//移动鼠标

$(document).mousemove(function(e){

if(!mouse_down) return false;

var _x=e.pageX;

var _y=e.pageY;

var div_right_div=$("#div_right>div").not(div_move).not("#xuxian");

div_move.css({ //改变正在移动div的top和left

top:_y-y_old,

left:_x-x_old

});

/*注意,因为鼠标当前始终在正在移动的div上面,所以,鼠标移动不会触发其他元素的mouseenter,mouseleave,mouseover和mouseout事件,要想达到同样的效果,只能根据鼠标的坐标来判断鼠标是否进入其他元素*/

var left_left=$("#div_left").offset().left; //确定左边div_left容器的位置

var left_width=$("#div_left").width();

var right_left=$("#div_right").offset().left; //确定右边div_right容器的位置

var right_width=$("#div_right").width();

var center_left=$("#div_center").offset().left; //确定中间div_center容器的位置

var center_width=$("#div_center").width();

//判断鼠标坐标是否进入左边div_left容器

if(_x>left_left&&_x

/*选定左边div_left容器下的最后一个可移动div,不包含当前正在移动的div元素和虚线框*/

var div_left_last=$("#div_left>div").not(div_move).not("#xuxian").filter(":last");

if(div_left_last.length>=1){ //判断时候左边div_left容器下时候有可移动div元素

if(_y>(div_left_last.offset().top+div_left_last.height())){ //判断鼠标是否在左边div_left容器最后一个元素的下边

$("#xuxian").remove(); //如果是,移除之前添加的虚线框

div_left_last.after(xuxian); //把虚线框添加为左边div_left容器的最后一个子元素

$("#xuxian").css({ //设定虚线框的高和宽

width:'100%',

height:div_move_height

});

}else{ //如果鼠标不在左边div_left容器最后一个元素的下边,那么,循环判定鼠标是否进入左边div_left容器下的可移动div元素里面

var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");

for(var i=0;i

if(_y>div_left_div.eq(i).offset().top&&(_y

$("#xuxian").remove(); //如果是,删除之前添加的虚线框

div_left_div.eq(i).before(xuxian); //把虚线框添加到当前鼠标进入的div元素的前面

$("#xuxian").css({ //设定虚线框的高和宽

width:'100%',

height:div_move_height

});

break; //退出循环

}

}

}

}else{//如果左边div_left容器下面没有任何可移动div元素

var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");

if(div_left_div.length==0){

$("#xuxian").remove(); //移除之前添加的虚线框

$("#div_left").append(xuxian); //把虚线框添加为左边div_left容器的子元素

$("#xuxian").css({

width:'100%',

height:div_move_height

});

}

}

}else if(_x>center_left&&_x

/*选定中间div_center容器下的最后一个可移动div,不包含当前正在移动的div元素和虚线框*/

var div_center_last=$("#div_center>div").not(div_move).not("#xuxian").filter(":last");

if(div_center_last.length>=1){ //判断中间div_center容器的下面时候有可移动div子元素

if(_y>(div_center_last.offset().top+div_center_last.height())){ //判断鼠标是否在中间div_center容器的最后一个可移动div子元素的下边

$("#xuxian").remove(); //如果是,删除之前添加的虚线框

div_center_last.after(xuxian); //把虚线框添加为中间div_center容器的最后一个div子元素

$("#xuxian").css({ //设定虚线框的宽和高

width:'100%',

height:div_move_height

});

}else{

//如果鼠标不在中间div_center容器最后一个可移动div子元素的下边,则,循环判断鼠标进入的是哪一个iv子元素

var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");

for(var i=0;i

if(_y>div_center_div.eq(i).offset().top&&(_y

$("#xuxian").remove(); //找到鼠标进入的div子元素,删除之前添加的虚线框

div_center_div.eq(i).before(xuxian); //把虚线框添加到当前鼠标进入的div子元素的前面

$("#xuxian").css({ //设定虚线框的宽度和高度

width:'100%',

height:div_move_height

});

break; //退出循环

}

}

}

}else{//如果中间div_center容器的中间没有可移动的div子元素

var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");

if(div_center_div.length==0){

$("#xuxian").remove(); //删除之前添加的虚线框

$("#div_center").append(xuxian); //把虚线框添加为中间div_center的最后一个div元素

$("#xuxian").css({

width:'100%',

height:div_move_height

});

}

}

}else if(_x>right_left&&_x

/*选定右边div_right容器下的最后一个可移动div,不包含当前正在移动的div元素和虚线框*/

var div_right_last=$("#div_right>div").not(div_move).not("#xuxian").filter(":last");

if(div_right_last.length>=1){ //判断右边div_right容器下边是否有可移动的div子元素

if(_y>(div_right_last.offset().top+div_right_last.height())){ //判断鼠标时候在右边div_right容器最后一个可移动div元素的下边

$("#xuxian").remove(); //如果是,删除之前添加的虚线框

div_right_last.after(xuxian); //添加虚线框为右边div_right容器的最后一个元素

$("#xuxian").css({ //设定虚线框的宽和高

width:'100%',

height:div_move_height

});

}else{

//如果鼠标不在右边div_right容器最后一个可移动div元素的下边,则,循环判断鼠标进入到右边div_right容器下哪个可移动div元素里面

for(var i=0;i

if(_y>div_right_div.eq(i).offset().top&&(_y

$("#xuxian").remove(); //找到鼠标进入的div元素,删除之前添加的虚线框

div_right_div.eq(i).before(xuxian); //把虚线框添加到鼠标进入的div元素的前面

$("#xuxian").css({ //设定宽和高

width:'100%',

height:div_move_height

});

break; //退出循环

}

}

}

}else{ //如果右边div_right元素的下边没有可移动的div子元素

if(div_right_div.length==0){

$("#xuxian").remove(); //删除之前添加的虚线框

$("#div_right").append(xuxian); //把虚线框添加为右边div_right容器的子元素

$("#xuxian").css({ //设定虚线框的宽和高

width:'100%',

height:div_move_height

});

}

}

}

}).mouseup(function(){

mouse_down=false; //鼠标松开

$("#xuxian").before(div_move); //将当前正在移动的div元素添加到虚线框的前面

div_move.css({ //更改正在移动div元素的position和宽

position:'static',

width:'100%'

});

$("#xuxian").remove(); //删除虚线框

return false;

});

}

//]]>

音乐

阿里西西提示您，试试鼠标拖动标题处

活动

科技

新闻

元素