1:安裝外掛程式
npm install vuedraggable
2:在需要使用的元件中引入
import draggable from 『vuedraggable』
3:註冊元件
components:
示例：
"height: 1000px;"
>
"test-left"
>
<
!-- 左側按鈕 --
>
v-model=
"list1"
draggable=
".c-item"
v-bind=
"dragoptionsl"
:options=
"}">
for=
"(d,index) in list1"
:key=
"index" class=
"item c-item"
>
}<
/div>
<
/draggable>
<
/div>
"test-right"
>
<
!-- 右側按鈕 --
>
"field"
:list=
"list2" v-bind=
"dragoptionsr" @change=
"tochange"
>
for=
"(d,k) in list2"
:key=
"k" class=
"item"
>
}<
/div>
<
/draggable>
<
/div>
<
/div>
import draggable from "vuedraggable"
;export default,,
,,],
list2:[,
,,],
};},
components:
, computed:;}
,dragoptionsr()
;},}
, methods:}}
};<
/script>
.test-left
.test-right
.test-right > div
.item
.ghostl
.ghostr 注意事項：
1:左邊draggle外掛程式，:group=""
2：options中的sort: false表示禁止上下拖動
3：問題：從左往右移動時，右側一直會出現items的name值，拖拽結束後，name值消失
解決方法：左右分別繫結乙個v-bind=「dragoptionsl」，v-bind=「dragoptionsr」
4:問題：當右側沒有任何的items時，需要給右側v-for迴圈的父元素指定乙個min-height，否則從左側拖到右側時，沒有接收的地方，則拖放失效
vuedraggable 實現部分元素不允許拖拽
效果圖 template 1 template 2 div 3 div class projset title 活動排序 div 4 ul class projset content 5 draggable 6 list imglist 7handle dargbtn 8 animation 200...
用遞迴實現從1 2 3 10
public static void main string args 用遞迴實現從1 2 3 10 public static int sum int n else public static void main string args 遞迴實現a a 1 a 2 b 其中a b均為不小於1的整數...
springboot使用redis實現從配置到實戰
目錄 springboot通常整合redis,採用的是redistemplate的形式,除了這種形式以外,還有另外一種形式去整合,即採用spring支援的註解進行訪問快取.pom.xml redis.clients jedis 2.7.3 org.springframework.data sprin...