HTML 实例分析

这篇文章主要讲解了“HTML 实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML 实例分析”吧！ 样式同前
ul.item {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.item li {
height: 50px;
line-height: 50px;
border: 1px solid #aaaaaa;
width: 200px;
padding: 0 10px;
display: flex;
align-items: center;
}
先把DOM渲染出来
new Vue（{
el: “#drag”,
data: {
draggingItem: null,
lastItem: null,
items: Array.from（{ length: 5 }, （_item, index） => （{
key: index + 1 + “”,
name: “Item” + （index + 1），
}）），
},
}）;
模板是异常的简单

{{item.name}}

然后可以在加name了。

当然也要加上配套的样式
.flip-list-move {
transition: transform 0.3s;
}
下面就是给子元素加上事件了

@dragstart=”dragstart（item）” @dragover=”dragover（item）”>
{{item.name}}

就两个事件
dragstart: function （item） {
this.draggingItem = item;
},
dragover: function （item） {
if （item !== this.draggingItem && this.lastItem !== item） {
const fromIndex = this.items.indexOf（this.draggingItem）;
const toIndex = this.items.indexOf（item）;
const temp = this.items[fromIndex];
this.items[fromIndex] = this.items[toIndex];
this.items[toIndex] = temp;
this.items = […this.items];
}
this.lastItem = item;
}
这里我和之前的写法略作了改动，判断拖动元素和拖入元素不是同一个，还判断了拖入元素和上次拖入元素也不是同一个，不然会发生不停抖动的情况，因为拖动的时候发生了元素移动，导致反复触发dragover事件。
注意最后这里的this.items = […this.items]，因为上面是直接在索引上修改数组元素的，而Vue2的响应式对数组在索引上的修改察觉不到，所以重新给this.items赋值，不过好在有key的加持，Vue只会针对修改的部分进行更新，无须担心性能问题。
整个的解决方案把所有HTML、CSS代码都算入也就不满80行，让我切切实实感受到了的威力——大杀器免费云主机、域名也，如果在Vue应用中有列表型元素的动画需求，第一考虑的就该是它。感谢各位的阅读，以上就是“HTML 实例分析”的内容了，经过本文的学习后，相信大家对HTML 实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: 如何解决提示node不是内部或外部命令的问题

这篇文章给大家分享的是有关如何解决提示node不是内部或外部命令的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 解决方法：1、打开“控制面板”，依次点击“系统和安全”-“系统”-“高级系统设置”-“环境变量”；2、用户变量中，…