vueプロジェクトでvuedraggableを使用する
5726 ワード
インストール
npm install vuedraggable
{{element.name}}
{{element.order}}
{{element.name}}
{{element.order}}
{{listString}}
{{list2String}}
import draggable from "vuedraggable";
const message = [
「ジェームズ」
「デュラント」、
「コビー」、
「ジョーダン」
];
export default {
name: "hello",
components: {
draggable
},
data() {
return {
list: message.map((name, index) => {
return { name, order: index + 1, fixed: false };
}),
list2: [],
editable: true,
isDragging: false,
delayedDragging: false
};
},
methods: {
// ソートを にドラッグしても に せない
orderList() {
this.list = this.list.sort((one, two) => {
return one.order - two.order;
});
},
onMove({ relatedContext, draggedContext }) {
//
const relatedElement = relatedContext.element;
//ドラッグ
const draggedElement = draggedContext.element;
console.log('ドラッグ1',relatedElement)
console.log('ドラッグ2',draggedElement)
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
}
},
computed: {
//
dragOptions() {
return {
animation: 0,
group: "description",
disabled: !this.editable,
ghostClass: "ghost"
};
},
listString() {
return JSON.stringify(this.list, null, 2);
},
list2String() {
return JSON.stringify(this.list2, null, 2);
}
},
watch: {
isDragging(newValue) {
if (newValue) {
this.delayedDragging = true;
return;
}
this.$nextTick(() => {
this.delayedDragging = false;
});
}
}
};
.box{
display:flex;
}
.arr{
display:flex;
}
.arr .arrcommon{
width:50%;
border:1px solid red;
}
.targetUl{
display:flex;
}
.groupBox{
border:1px solid #00FFFF;
width:50%;
}
.groupBox li{
list-style: none;
height:30px;
border:1px solid #eeeeee;
}
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group {
min-height: 20px;
}
.list-group-item {
cursor: move;
}
.list-group-item i {
cursor: pointer;
}