九宮格ドラッグ
6693 ワード
効果の例
Gridレイアウト(グリッドレイアウト)の簡単な理解
メッシュレイアウトとは
CSSメッシュレイアウト(メッシュとも呼ばれる)は、2 Dメッシュレイアウトシステムです.CSSはウェブページのレイアウトを処理する上でずっとよくしていません.最初はtable(テーブル)レイアウトを使用し、float(フローティング)、position(位置決め)、inline-block(行内ブロック)レイアウトを使用しましたが、これらの方法は本質的にhackであり、垂直中心などの多くの機能を失いました.その後flexbox(ボックスレイアウト)が出て、多くのレイアウト問題を解決しましたが、複雑な2次元レイアウトではなく、1次元レイアウトにすぎず、実際にはそれら(flexboxとgrid)がうまく組み合わせて使用できます.Gridレイアウトはレイアウトの問題を解決するために作成された最初のCSSモジュールである.
メッシュレイアウトのプロパティについて簡単に説明します
もちろん、読めなくても大丈夫ですが、ここには個人的に大好きなグリッドレイアウトの文章があります.詳しく紹介されています.グリッドレイアウトの内容を深く学ぶことができます.
トランスポートゲート:GridレイアウトガイドGridレイアウトガイド
Vueは九宮格ドラッグを実現
Demoアドレス:Demoおよび完全コード
九宮格のレイアウトを実現
/*css*/
.container{
position: relative; /* ， */
display: grid; /* */
width: 300px;
height: 300px;
grid-template-columns: 100px 100px 100px; /* ， */
grid-template-rows: 100px 100px 100px;
grid-template-areas: "head1 head2 head3" /* ， */
"main1 main2 main3"
"footer1 footer2 footer3";
border: 1px solid #000;
margin: 0 auto;
}
.block{
position: absolute; /* container */
width: 100px;
height: 100px;
display: flex; /*flex ， */
justify-content: center;
justify-items: center;
align-items: center;
align-content: center;
user-select: none; /* */
background: olivedrab;
border: 1px solid #000
}
//app.vue
{{positionX}}
{{positionY}}
ドラッグ＆ドロップを実現するJSコード部分
ここでは、いくつかのコアコードを選択して説明します.コードは省略されています.コードは少し長いので、紙面を占めすぎて意味がありません.すべてのコードを閲覧する必要がある場合は、上のDemo接続をクリックすることができます.
// animate.css css ， animate.css
import animate from 'animate.css';
export default {
name: 'app',
data () {
return {
positionX:0, //
positionY:0,
}
},
methods:{
move(e){
let oDiv = e.target; //
let gDiv = e.path[1]; //
/* ，
** , ，
** ， top：0 left：0
*/
// ， 0
let disX = e.clientX - 0;
let disY = e.clientY - 0;
document.onmousemove = (e)=>{
// ， top left
let left = e.clientX - disX;
let top = e.clientY - disY;
switch (oDiv.style.gridArea){
case "head1 / head1 / head1 / head1":this.rangeOfHead1(left,top,oDiv);break; // head1
case "head2 / head2 / head2 / head2":this.rangeOfHead2(left,top,oDiv);break; // head2
case "head3 / head3 / head3 / head3":this.rangeOfHead3(left,top,oDiv);break; // head3
case "main1 / main1 / main1 / main1":this.rangeOfMain1(left,top,oDiv);break; // main1
...
}
};
document.onmouseup = (e)=>{
// ，
//
if(e.clientY-gDiv.offsetTop<100&&e.clientX-gDiv.offsetLeft<100){
//
this.changeBlock("head1",oDiv);
}else if(e.clientY-gDiv.offsetTop>100&&e.clientX-gDiv.offsetLeft<100&&e.clientY-gDiv.offsetTop<200){
this.changeBlock("main1",oDiv);
}else if(e.clientY-gDiv.offsetTop>200&&e.clientX-gDiv.offsetLeft<100){
this.changeBlock("footer1",oDiv);
}else if(e.clientY-gDiv.offsetTop<100&&e.clientX-gDiv.offsetLeft>100&&e.clientX-gDiv.offsetLeft<200){
this.changeBlock("head2",oDiv);
}else if(e.clientY-gDiv.offsetTop<100&&e.clientX-gDiv.offsetLeft>200){
this.changeBlock("head3",oDiv);
}else if(e.clientY-gDiv.offsetTop>100&&e.clientX-gDiv.offsetLeft>200&&e.clientY-gDiv.offsetTop<200){
this.changeBlock("main3",oDiv);
}else if(e.clientY-gDiv.offsetTop>200&&e.clientX-gDiv.offsetLeft>200){
this.changeBlock("footer3",oDiv);
}else if(e.clientY-gDiv.offsetTop>200&&e.clientX-gDiv.offsetLeft>100&&e.clientX-gDiv.offsetLeft<200){
this.changeBlock("footer2",oDiv);
}else {
this.changeBlock("main2",oDiv);
}
document.onmousemove=null; //
document.onmousedown = null; //
// ， hhh
oDiv.className = "block animated wobble";
let removeClass = setTimeout(()=>{
oDiv.className = "block animated";
},500);
};
},
rangeOfHead1(x,y,oDiv){ // head1
if(x>=200){
x=200;
}else if(x<=0){
x=0;
}
if(y>=200){
y=200;
}else if(y<=0){
y=0;
}
oDiv.style.left = x + 'px';
oDiv.style.top = y + 'px';
this.positionX = x;
this.positionY = y;
},
rangeOfHead2(x,y,oDiv){ // head2
if(x>=100){
x=100;
}else if(x<=-100){
x=-100;
}
if(y>=200){
y=200;
}else if(y<=0){
y=0;
}
oDiv.style.left = x + 'px';
oDiv.style.top = y + 'px';
this.positionX = x;
this.positionY = y;
},
...
changeBlock(blockName,oDiv){ //
this.positionX = 0;
this.positionY = 0;
oDiv.style.gridArea=blockName;
}
},
}