Home > Developer > JavaScript
JQuery UI provides many useful tools, such as draggable and droppable. This allows us to implement complex functions with very few code and achieve compatibility with multiple browsers.
I have made two different versions of the jiugongge puzzle. Because the JS Code of the two versions remains relatively large, I am going to separate them. First, it is also the simplest version. Step by step.
First, you have created an HTML file and threw all your nine cut images into the file:
[Html]
<! Doctype>
<Html>
<Head>
</Head>
<Body>
<Div id = "jigsaw">
</Div>
<Script type = "text/javascript" src = "scripts/jquery-1.7.2.min.js"> </script>
<Script type = "text/javascript" src = "scripts/jquery-ui-1.8.21.custom.min.js"> </script>
<Script type = "text/javascript" src = "scripts/jigsaw. js"> </script>
</Body>
</Html>
Note: The image insertion sequence must be in the correct order. Later, JS will be used to disrupt the image order.
Add CSS to make the image show a nine-square grid distribution:
[Css]
# Jigsaw {float: left; width: pixel ;}
# Jigsaw IMG {float: left; width: 150px; height: 100px ;}
Start to write my jigsaw. js. First, record the amount we often need:
[Javascript]
Var jigsaw = $ ('# jigsaw '),
Imgs = jigsaw. find ("IMG ");
Var col = 3,
Row = 3,
Match = col * row,
Width = imgs. width (),
Height = imgs. height (),
Order = new Array ();
Then, make some preparations. Here, I write the correct sequence into the image ID to facilitate the determination of the image sequence.
[Javascript] view plaincopy
Imgs. each (function (I ){
$ (This). attr ('id', 'jigsaw '+ I );
$ (This). addClass ("ready ");
});
Then, disrupt the image order.
The above code is used to add the "ready" class to the image.
The idea is: Randomly select an image in the "ready" class image and insert the corresponding location of the jiugong ge from left to right and from top to bottom, remove its "ready" class until the positions of the nine images are adjusted. The variable "match" is reduced to 0. At the same time, insert nine divs under the image for image adsorption.
[Javascript]
For (match; match> 0; match --){
$ ("<Div/>"). appendTo (jigsaw );
Var now = col * row-match,
NowCol = now % col,
NowRow = parseInt (now/col );
Var selectImg = imgs. filter (". ready"). eq (parseInt (Math. random () * 10) % match );
SelectImg.css ({
'Left': nowCol * width,
'Top': nowRow * height
});
SelectImg. removeClass ("ready ");
Order [now] = selectImg. attr ('id'). replace (/jigsaw/I ,"");
}
As shown above, I use imgs. filter (". ready ") first select the image with the" ready "class, and then select the parseInt (Math. random () * 10) % match an image and place it in the corresponding position.
After changing the position, I will record the current position order to the array order.
After this step, make some changes to CSS. As follows:
[Css]
# Jigsaw {float: left; width: pixel PX; margin: 103px 0 0 150px; position: relative; z-index: 1 ;}
# Jigsaw DIV {float: left; width: 150px; height: 100px; padding: 0 ;}
# Jigsaw IMG {float: left; width: 150px; height: 100px; font-size: 3em; color: # fff; background: # ccc; position: absolute; z-index: 2 ;}
Next, we will use the magic jQuery UI to implement the drag-and-drop function of images.
Idea: drag an image near the corresponding position, it will be "adsorbed" into the corresponding DIV and cannot be dragged.
[Javascript]
$ ('Div ', jigsaw). each (function (I ){
Var obj = $ ("# jigsaw" + order [I]);
If (obj. attr ('id') = 'jigsaw '+ I ){
Match ++;
Obj. appendTo ($ (this). addClass ("dropped ");
}
Else {
Obj. draggable ();
$ (This). droppable ({
Drop: function (event, ui ){
If (ui. draggable. attr ('id') = 'jigsaw '+ I ){
Ui. draggable. appendTo ($ (this). addClass ("dropped ");
Match ++;
Ui. draggable. draggable ("disable ");
$ (This). droppable ("disable ");
If (match = 9) {alert ("Match! ");}
}
}
});
}
});
As shown above, check whether each image is exactly distributed in the corresponding position in order. If it is already in the corresponding position, it will be moved into the corresponding DIV, give it a class of "dropped", match Number plus 1.
Dropped CSS:
[Css]
# Jigsaw IMG. dropped {position: static! Important ;}
After the image is inserted into the corresponding div, you need to change the position attribute to static, the image is automatically aligned with the DIV. If the image is not in the corresponding position, use the Draggable method of jQuery UI to drag the image, and use the Droppable method to enable the corresponding DIV to absorb the image.
When the DIV absorbs an image, it determines whether the image is adsorbed on the corresponding DIV. If yes, add the "dropped" class to it, and add the match number to 1, and disable the adsorpability of this DIV.
When match is set to 9, 9 images have been dragged to the corresponding position, and the prompt that the puzzle has been completed is complete!
Another version is a little more advanced than this one. After the image is dragged to the correct position, it can be dragged out again. Although it was modified on the basis of this version, it is basically beyond the scope of T-T. Next time.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
