1. 画像をドラッグして並べ替えることによる効果は次のとおりです。
2. 導入手順
(1) まずvuedraggableをインストールします
npm i --save vuedraggable
(2) vuedraggable関連属性のドキュメント記述（一部属性を含む）
| 属性名 | 説明する |
|---|---|
| グループ | :group= "name"、同じグループは互いにドラッグすることも、{ name: "..."、pull: [true, false, 'clone', array , function], put: [true, false, array , function] ] } |
| 選別 | :sort="true"、内部ソートを有効にするかどうか。 false に設定すると、そのグループが属するグループはソートできなくなり、他のグループをドラッグしてソートできるようになります。 |
| 遅れ | :lay="0"、マウスを押した後、マウスをドラッグできる時間 |
| タッチスタートしきい値 | 要素をドラッグするためにマウスを移動するピクセル数 |
| 無効 | :disabled="true"、コンポーネントのドラッグを有効にするかどうか |
| アニメーション | ドラッグ中のアニメーション効果は依然としてクールで、デジタルタイプです。たとえば、animation=1000 と設定すると、1 秒間のトランジション アニメーション効果が発生します。 |
| ハンドル | :handle=".mover" は、CSS がムーバー クラスである要素にマウスが移動する場合にのみドラッグできます。 |
| フィルター | :filter=".unmover" unmover スタイルの要素はドラッグできません |
| ドラッグ可能 | :draggable=".item" これらの要素はドラッグできます |
| ゴーストクラス | :ghostClass="ghostClass" ドラッグ要素のプレースホルダー クラス名を設定します。カスタム スタイルを有効にするには、! important を追加し、forceFallback 属性を true に設定する必要がある場合があります。 |
| 選択されたクラス | :ghostClass="hostClass" は選択したターゲットのスタイルです。カスタム スタイルを有効にするには、! important を追加し、forceFallback 属性を true に設定する必要がある場合があります。 |
| ドラッグクラス | :dragClass="dragClass" は要素のスタイルをドラッグします。カスタム スタイルを有効にするには、! important を追加し、forceFallback 属性を true に設定する必要がある場合があります。 |
| スクロール | デフォルトは true で、ドラッグを許可するスクロール領域があるかどうかを示します。 |
| スクロールFn | スクロールコールバック関数 |
| スクロール感度 | スクロールエリアからどのくらい離れているか、スクロールバーをスクロールします |
| スクロール速度 | スクロール速度 |
(3) 具体的なケースコードの実装
<template>
<div class="app-container">
<div :class="canEdit ? 'dargBtn-lock el-icon-unlock' : 'dargBtn-lock el-icon-lock'" @click="removeEvent()">
{
{
canEdit? '调整': '锁定' }}</div>
<ul class="projset-content">
<draggable :move="onMove" :list="imgList" handle=".dargBtn" :animation="200" filter=".undraggable">
<li v-for="(item, index) in imgList" :key="index" :class="canEdit ? 'draggable' : 'undraggable'">
<div class="dargBtn">
<svg-icon icon-class="drag" />
</div>
<el-image style="width: 100%; height: 100px" :src="item.path" :preview-src-list="srcList">
</el-image>
<span>{
{
item.name }}</span>
</li>
</draggable>
</ul>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable },
data() {
return {
canEdit: true,
imgList: [
{
path: 'https://img2.baidu.com/it/u=2969169350,1551254405&fm=253&fmt=auto&app=120&f=PNG?w=1280&h=800',
name: '1',
},
{
path: 'https://img1.baidu.com/it/u=1605341541,1182642759&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
name: '2',
},
{
path: 'https://img2.baidu.com/it/u=1979633876,2912484447&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
name: '3',
}
],
srcList: [
'https://img2.baidu.com/it/u=2969169350,1551254405&fm=253&fmt=auto&app=120&f=PNG?w=1280&h=800',
'https://img1.baidu.com/it/u=1605341541,1182642759&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
'https://img2.baidu.com/it/u=1979633876,2912484447&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
]
}
},
created() {
},
mounted() {
},
methods: {
onMove(relatedContext, draggedContext) {
console.log(relatedContext.relatedContext.list);
},
removeEvent(item) {
if (this.canEdit) {
this.canEdit = false;
} else {
this.canEdit = true;
}
console.log(this.canEdit);
}
}
}
</script>
<style scoped lang="scss">
.app-container {
background: #ffffff;
height: 100%;
.dargBtn-lock {
margin: 0px 50px;
color: #2ea9df;
}
.projset-content {
list-style-type: none;
position: relative;
li {
display: inline-block;
margin: 10px;
}
img {
width: 141px;
height: 100px;
}
span {
justify-content: center;
display: flex;
}
.dargBtn {
position: absolute;
line-height: 100px;
text-align: center;
width: 141px;
height: 100px;
display: none;
color: white;
background: rgba(101, 101, 101, 0.6);
z-index: 9999;
}
.draggable {
cursor: pointer;
width: 141px;
height: 100px;
}
.draggable:hover .dargBtn {
display: block;
}
}
}
</style>