Maison > Article > interface Web > JavaScript implémente le déplacement d'éléments pour les aligner sur la grille (en se déplaçant d'une distance fixe à chaque fois)

JavaScript implémente le déplacement d'éléments pour les aligner sur la grille (en se déplaçant d'une distance fixe à chaque fois)

黄舟original: 2017-02-20 14:38:481828parcourir

Ces derniers jours, j'ai travaillé sur une fonction supplémentaire pour faire glisser des éléments, qui consiste à s'aligner sur la grille. En fait, cela signifie déterminer la position initiale de l'élément, puis déplacer l'élément sur une distance fixe. à chaque fois en le faisant glisser. Permet d'aligner les éléments dans la grille. Tout d'abord, regardons les rendus, puis expliquons les détails en détail

JavaScript implémente le déplacement d'éléments pour les aligner sur la grille (en se déplaçant d'une distance fixe à chaque fois)

J'ai fait un gif Vous pouvez voir que chaque élément se déplace en fonction de la distance unitaire minimale. Et à chaque fois les éléments sont alignés sur la grille.

Expliquez d'abord les idées et les détails basés sur la démo, et le code de la démo sera donné plus tard.

1. Déterminez l'unité minimale de chaque mouvement de l'élément (10px et 10px dans la démo), c'est-à-dire que chaque déplacement horizontal ou vertical est de 10px. Poser une couche d'arrière-plan de grille nous aide à mieux voir l'effet (chaque grille de la démo mesure également 10 px * 10 px).

2. Afin de voir l'effet plus clairement, la largeur et la hauteur de l'élément (toutes deux sont des multiples de 10px) et la position par défaut (également un multiple de 10px) sont initialisées. Par exemple : la largeur et la hauteur de l'élément sont 50px * 50px, et la position initiale de l'élément est 0xp * 0px. L'avantage est que lors du chargement initial, l'élément peut être assuré de couvrir un nombre entier de petites grilles (c'est-à-dire 5 * 5 petites grilles), et il n'y aura pas de couverture incomplète de la grille. Cet article vise en fait à éviter que les utilisateurs ou les personnes souffrant de troubles obsessionnels compulsifs n'aient à s'inquiéter autant. Il s'agit en fait d'une simple opération visant à embellir la position de placement. Les amis qui comprennent n’ont pas besoin d’être aussi délibérés, il suffit de comprendre.

3. La chose la plus importante est de savoir comment déterminer quand se déplacer sur une distance fixe. Il y a une chose à comprendre à propos de cet effet de démonstration : le mouvement de la souris et le mouvement de l'élément correspondent, mais ils ne sont pas équivalents en temps réel (bien sûr, si vous ne considérez pas la plus petite unité et faites simplement glisser l'élément, puis définissez la position de l'élément à la position de la souris, à ce stade, on peut comprendre que le mouvement de la souris et le mouvement de l'élément sont équivalents en temps réel). Revenons à la description de la démo, lorsque la souris se déplace sur la page Web, elle se déplace pixel par pixel (vous pouvez observer la position du mouvement de la souris via console.log(e.pageX)). L'élément se déplace tous les 10 pixels. C’est la clé de notre compréhension et la clé de toute la démo.

Après avoir compris les idées ci-dessus, combinées avec le code et les commentaires, laissez-moi vous expliquer à nouveau :

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0px;
padding:0px;
}
p{
margin:0px;
padding:0px;
}
</style>
<script src="js/jquery-1.11.2.js"></script>
</head>
<body>
<p style="height: 600px;background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgIC
A8ZGVmcz4gICAgICAgIDxwYXR0ZXJuIGlkPSJncmlkIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0gMTAgMCBMIDAgMCAw
IDEwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGRkZGQiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMSIgLz4gICAgICAgIDwvcGF0dGVybj4gICAgPC9kZWZzPiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ
2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg==)">
<p id="bk" style="width:50px;height:50px;background: red;position: absolute"></p>
</p>
</body>
<script>
$(function(){
var orgX,orgY,eleX,eleY,hasMove=false;
$("#bk").on("mousedown",function(e){
orgX= e.pageX; //记录鼠标的水平位置
orgY= e.pageY; //记录鼠标的垂直位置
eleX=$(this).offset().left; //记录元素的水平位置
eleY=$(this).offset().top; //记录元素的垂直位置
hasMove=true; //鼠标按下时标明当前元素可以拖拽标识
});
$(document).on("mousemove",function(e){
if(hasMove){ //当元素可以拖拽时执行操作
//新位置计算方法为元素的上次位置加上新的位移量
var left=eleX+Math.round( ( e.pageX - orgX ) / 10 ) * 10;
var top= eleY+Math.round( ( e.pageY - orgY) / 10 ) * 10;
//更新位置信息
$("#bk").css({
top:top,
left:left
});
}
}).on("mouseup",function(e){
hasMove=false; //鼠标松开时设置元素不可拖拽
});
})
</script>
</html>

Le code ci-dessus donne plus détails Commentaires, parmi lesquels, le code le plus critique est

Math.round( ( e.pageX - orgX ) / 10 ) * 10;

Ce code sert à calculer le nouveau déplacement de l'élément, en soustrayant la position de l'élément à partir de la dernière position de la souris La position de la souris lorsqu'elle est enfoncée est divisée par l'unité minimale de 10, arrondie pour obtenir une valeur entière, puis multipliée par l'unité minimale de 10. Vous pouvez obtenir la distance unitaire que l'élément doit parcourir. Si vous ne comprenez pas cela, vous pouvez exécuter le code et y réfléchir vous-même. (Bien sûr, vous pouvez également utiliser les méthodes de plafond et de sol de Mach).

Ce qui précède est l'implémentation JavaScript du déplacement d'éléments pour les aligner sur la grille (en se déplaçant d'une distance fixe à chaque fois). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www). .php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir le style CSS en analysant jsArticle suivant：Comment obtenir le style CSS en analysant js

Articles Liés

Voir plus