vue实现div拖拽互换位置且有过渡效果
2019-05-10 14:07
477 查看
vue实现div拖拽互换位置且有过渡效果
template模板
<transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80px'}" draggable="true" @dragstart="handleDragStart($event, item)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)" > </div> </transition-group>
script:
<script> export default { name: 'Toolbar', data () { return { items: [ { key: 1, color: '#ffebcc'}, { key: 2, color: '#ffb86c'}, { key: 3, color: '#f01b2d'} ], dragging: null } }, methods:{ handleDragStart(e,item){ this.dragging = item; }, handleDragEnd(e,item){ this.dragging = null }, //首先把div变成可以放置的元素,即重写dragenter/dragover handleDragOver(e) { e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置! }, handleDragEnter(e,item){ e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件 if(item === this.dragging){ return } const newItems = [...this.items] console.log(newItems) const src = newItems.indexOf(this.dragging) const dst = newItems.indexOf(item) newItems.splice(dst, 0, ...newItems.splice(src, 1)) this.items = newItems } } } </script>
css
<style scoped> .container{ width: 80px; height: 300px; position: absolute; left: 0; display:flex; flex-direction: column; padding: 0; } .item { margin-top: 10px; transition: all linear .3s } </style>
文章转自这里
相关文章推荐
- vue实现div拖拽互换位置
- vue实现div拖拽互换位置
- js实现div拖拽互换位置
- 使用jQuery实现两个div中按钮互换位置的实例代码
- jquery 在指定位置弹出div框并实现DIV由下向上展开的效果
- 用div实现的拖拽效果(适合作首页)2
- jquery 在指定位置弹出div框并实现从下向上展开效果
- jquery实现div遮罩效果,并获取鼠标位置。
- vue中渐进过渡效果实现
- vue.draggable实现表格拖拽排序效果
- 简洁的drag效果,自由拖拽div的实现及注意点
- 基于vue实现拖拽效果
- 实现一个宽和高都是100像素的div可以用鼠标拖拽移动的效果
- vuedraggable+element ui实现页面控件拖拽排序效果
- vue动画过渡效果实现
- Js实现无刷新添加新层,拖动DIV层可互换位置
- Js实现无刷新添加新层,拖动DIV层可互换位置丨www.CsrCode.cn
- JS+CSS实现几个DIV层上下移动交换位置的效果
- div实现拖拽效果,宽度发生变化
- jquery实现div的拖拽效果