jQuery to achieve Google home page drag effect method
- 2020-06-03 05:49:34
- OfStack
An example of jQuery is presented in this paper. Share to everybody for everybody reference. The details are as follows:
Here with jQuery. js library to write a copy of the Google home page drag effects code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> with JQUERY Implementation of imitation Google Homepage drag special effect </title>
<style type="text/css">
#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{ /* Dotted box */
border:1px dashed #000;
margin:5px 0;
}
</style>
<script src="js/jquery.js"></script>
<script>
//<![CDATA[
window.onload=function(){
var mouse_down=false; // Hold down the mouse
var x_old=null; // The coordinates of the mouse when the mouse is pressed
var y_old=null;
var div_move=null; // Moving div
var div_move_width=null; // Moving div The width of
var div_move_height=null; // Moving div The high
var xuxian="<div id='xuxian'></div>"; // Dotted box
document.oncontextmenu=new Function('event.returnValue=false;');
// Prohibited right
document.onselectstart=new Function('event.returnValue=false;');
// Ban on selected
// When the mouse is pressed
$("p").mousedown(function(e){
mouse_down=true; // The mouse click
div_move=$(this).parent(); // Specify the current div For moving div
div_move_width=div_move.width();
div_move_height=div_move.height();
x_old=e.pageX-$(this).offset().left; // Get mouse coordinates
y_old=e.pageY-$(this).offset().top;
// The current div the position to 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
});
// Adds the dotted box to the moving one div Previous position
div_move.before(xuxian);
$("#xuxian").css({
width:'100%',
height:div_move_height
});
});
// Move the mouse
$(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({ // Change is moving div the top and left
top:_y-y_old,
left:_x-x_old
});
/* Pay attention to , Because the mouse is currently always moving div The above ,
so , Mouse movement does not trigger other elements mouseenter,mouseleave,mouseover
and mouseout The event , To achieve the same effect ,
You can only tell if the mouse is entering another element by its coordinates */
var left_left=$("#div_left").offset().left;
// Make sure the left side div_left Container position
var left_width=$("#div_left").width();
var right_left=$("#div_right").offset().left;
// Determine the right div_right Container position
var right_width=$("#div_right").width();
var center_left=$("#div_center").offset().left;
// Determine the middle div_center Container position
var center_width=$("#div_center").width();
// Determine if mouse coordinates enter the left side div_left The container
if(_x>left_left&&_x<(left_left+left_width)){
/* Selected on the left div_left The bottom of the container 1 A removable div,
Does not include currently moving div Elements and dotted lines */
var div_left_last=$("#div_left>div").not(div_move).not("#xuxian").filter(":last");
if(div_left_last.length>=1){
// Judgment time left div_left It can be moved under the container div The element
if(_y>(div_left_last.offset().top+div_left_last.height())){
// Determine if the mouse is on the left div_left The container finally 1 The bottom of the element
$("#xuxian").remove(); // If it is , Removes the dotted box that was added earlier
div_left_last.after(xuxian);
// Add the dotted box to the left div_left The end of the container 1 child
$("#xuxian").css({ // Set the height and width of the dashed box
width:'100%',
height:div_move_height
});
}else{
// If the mouse is not on the left div_left The container finally 1 The bottom of the element ,
// then , Loop to determine if the mouse enters the left side div_left Removable under the container div Elements inside
var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");
for(var i=0;i<div_left_div.length;i++){
if(_y>div_left_div.eq(i).offset().top&&(_y<div_left_div.eq(i).offset().top+div_left_div.eq(i).height())){
$("#xuxian").remove();
// If it is , Delete the dotted box you added earlier
div_left_div.eq(i).before(xuxian);
// Add the dotted box to the current mouse entry div Before the element
$("#xuxian").css({ // Set the height and width of the dashed box
width:'100%',
height:div_move_height
});
break; // Exit the loop
}
}
}
}else{// If the left div_left There is nothing to move under the container div The element
var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");
if(div_left_div.length==0){
$("#xuxian").remove(); // Removes the dotted box that was added earlier
$("#div_left").append(xuxian);
// Add the dotted box to the left div_left Child elements of the container
$("#xuxian").css({
width:'100%',
height:div_move_height
});
}
}
}else if(_x>center_left&&_x<(center_left+center_width)){
// Determine if the mouse is in the middle div_center The container
/* Select the middle div_center The bottom of the container 1 A removable div,
Does not include currently moving div Elements and dotted lines */
var div_center_last=$("#div_center>div").not(div_move).not("#xuxian").filter(":last");
if(div_center_last.length>=1){
// Determine the middle div_center The bottom of the container is movable div Child elements
if(_y>(div_center_last.offset().top+div_center_last.height())){
// Determine if the mouse is in the middle div_center The end of the container 1 A removable div The bottom of the child element
$("#xuxian").remove();
// If it is , Delete the dotted box you added earlier
div_center_last.after(xuxian);
// Add the dotted box as the center div_center The end of the container 1 a div Child elements
$("#xuxian").css({ // Set the width and height of the dashed box
width:'100%',
height:div_move_height
});
}else{
// If the mouse is not in the middle div_center The container finally 1 A removable div The bottom of the child element ,
// Loop to determine where the mouse is entering 1 a iv Child elements
var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");
for(var i=0;i<div_center_div.length;i++){
if(_y>div_center_div.eq(i).offset().top&&(_y<div_center_div.eq(i).offset().top+div_center_div.eq(i).height())){
$("#xuxian").remove();
// Find the mouse entry div Child elements , Delete the dotted box you added earlier
div_center_div.eq(i).before(xuxian);
// Add the dotted box to the current mouse entry div The front of the child element
$("#xuxian").css({
// Set the width and height of the dotted box
width:'100%',
height:div_move_height
});
break; // Exit the loop
}
}
}
}else{
// If the middle div_center There is nothing movable in the middle of the container div Child elements
var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");
if(div_center_div.length==0){
$("#xuxian").remove();
// Delete the dotted box you added earlier
$("#div_center").append(xuxian);
// Add the dotted box as the center div_center At the end of the 1 a div The element
$("#xuxian").css({
width:'100%',
height:div_move_height
});
}
}
}else if(_x>right_left&&_x<(right_left+right_width)){
// Determine if the mouse is on the right div_right The container
/* Choose the right div_right The bottom of the container 1 A removable div,
Does not include currently moving div Elements and dotted lines */
var div_right_last=$("#div_right>div").not(div_move).not("#xuxian").filter(":last");
if(div_right_last.length>=1){
// Determine the right div_right Is there any movable under the container div Child elements
if(_y>(div_right_last.offset().top+div_right_last.height())){
// Determine when the mouse is on the right div_right The container finally 1 A removable div Bottom of the element
$("#xuxian").remove();
// If it is , Delete the dotted box you added earlier
div_right_last.after(xuxian);
// Add a dotted box for the right div_right The end of the container 1 An element
$("#xuxian").css({
// Set the width and height of the dashed box
width:'100%',
height:div_move_height
});
}else{
// If the mouse is not on the right div_right The container finally 1 A removable div Bottom of the element ,
// Loop the mouse into the right div_right Which can be moved under the container div Elements inside
for(var i=0;i<div_right_div.length;i++){
if(_y>div_right_div.eq(i).offset().top&&(_y<div_right_div.eq(i).offset().top+div_right_div.eq(i).height())){
$("#xuxian").remove();
// Find the mouse entry div The element , Delete the dotted box you added earlier
div_right_div.eq(i).before(xuxian);
// Add the dotted box to the mouse entry div Before the element
$("#xuxian").css({
// Set the width and height
width:'100%',
height:div_move_height
});
break;
// Exit the loop
}
}
}
}else{
// If the right div_right There is nothing to move underneath the element div Child elements
if(div_right_div.length==0){
$("#xuxian").remove();
// Delete the dotted box you added earlier
$("#div_right").append(xuxian);
// Add the dotted box to the right div_right Child elements of the container
$("#xuxian").css({
// Set the width and height of the dashed box
width:'100%',
height:div_move_height
});
}
}
}
}).mouseup(function(){
mouse_down=false; // Release the mouse
$("#xuxian").before(div_move);
// Will be currently moving div The element is added to the front of the dotted box
div_move.css({
// The change is moving div Elements of the position And the width
position:'static',
width:'100%'
});
$("#xuxian").remove();
// Delete the dotted box
return false;
});
}
//]]>
</script>
</head>
<body>
<div id="div_width">
<div id="div_left">
<div class="can_move">
<p> music </p>
</div>
<div class="can_move">
<p> activity </p>
</div>
</div>
<div id="div_center">
<div class="can_move center_width">
<p> Science and technology </p>
</div>
</div>
<div id="div_right">
<div class="can_move">
<p> news </p>
</div>
<div class="can_move">
<p> The element </p>
</div>
</div>
</div>
</body>
</html>I hope this article has been helpful for your jQuery programming.