备忘录--简单的拖拽样式

备忘录–简单的拖拽样式

html：

/<div
class=“info_box”
//动态设置定位属性
:style="{top:xAsyis+‘px’,left:yAsyis+‘px’}"
//设置可拖拽属性
draggable=“true”
//监听拖拽完成事件
@dragend=“moveIt”
//开关动画
:class=“openFlag?‘open’:‘close’”
>/

css：

.info_box {
position: fixed;
top: 50%;
left: 10px;
z-index: 999;
}

.open {
animation: openMove 0.5s forwards;
}
.close {
animation: closeMove 0.5s forwards;
}
@keyframes closeMove {
0% {
transform-origin: 0 0 0;
transform: scale(1);
opacity: 1;
}
20% {
transform-origin: 0 0 0;
transform: scale(0.8, 0.8);
opacity: 0.8;
}
40% {
transform-origin: 0 0 0;
transform: scale(0.6, 0.6);
opacity: 0.6;
}
60% {
transform: scale(0.4, 0.4);
transform-origin: 0 0 0;
opacity: 0.4;
}
80% {
transform: scale(0.2, 0.2);
transform-origin: 0 0 0;
opacity: 0.2;
}
100% {
transform: scale(0.1, 0.1);
transform-origin: 0 0 0;
opacity: 0.1;
}
}
@keyframes openMove {
100% {
transform-origin: 0 0 0;
transform: scale(1, 1);
opacity: 1;
}
80% {
transform-origin: 0 0 0;
transform: scale(0.8, 0.8);
opacity: 0.8;
}
60% {
transform-origin: 0 0 0;
transform: scale(0.6, 0.6);
opacity: 0.6;
}
40% {
transform: scale(0.4, 0.4);
transform-origin: 0 0 0;
opacity: 0.4;
}
20% {
transform: scale(0.2, 0.2);
transform-origin: 0 0 0;
opacity: 0.2;
}
0% {
transform: scale(0.1, 0.1);
transform-origin: 0 0 0;
opacity: 0.1;
}
}

js：

moveIt(e) {
this.xAsyis = e.clientY
this.yAsyis = e.clientX
},

//优化项：不直接获取事件对象的定位，通过事件对象的偏移值计算拖拽后的位置。