大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要讲解了“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}}
然后可以在
当然也要加上配套的样式
.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行,让我切切实实感受到了
感谢各位的阅读,以上就是“HTML