拖拽
This commit is contained in:
WangHao
parent
23dbefdd91
commit
9c3afb79d0
1
ruoyi-ui/src/assets/icons/svg/100.svg
Normal file
1
ruoyi-ui/src/assets/icons/svg/100.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615815538287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25670" data-spm-anchor-id="a313x.7781069.0.i53" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M852.149 736.914H171.851c-38.598 0-70-31.401-70-70V234.341c0-38.598 31.402-70 70-70h680.298c38.598 0 70 31.402 70 70v432.573c0 38.599-31.402 70-70 70zM171.851 224.341c-5.514 0-10 4.486-10 10v432.573c0 5.514 4.486 10 10 10h680.298c5.514 0 10-4.486 10-10V234.341c0-5.514-4.486-10-10-10H171.851z" p-id="25671" data-spm-anchor-id="a313x.7781069.0.i52" class="selected" fill="#1D6EFE"></path><path d="M288 605.628c-7.678 0-15.355-2.929-21.213-8.787-11.716-11.716-11.716-30.71 0-42.426l165-165a30 30 0 0 1 42.426 0L552 467.201l162.787-162.787c11.715-11.716 30.711-11.716 42.426 0 11.716 11.716 11.716 30.711 0 42.427l-184 184c-11.715 11.715-30.711 11.715-42.426 0L453 453.054 309.212 596.841c-5.857 5.858-13.535 8.787-21.212 8.787zM724 859.659H300c-16.568 0-30-13.432-30-30s13.432-30 30-30h424c16.568 0 30 13.432 30 30s-13.432 30-30 30z" p-id="25672" data-spm-anchor-id="a313x.7781069.0.i49" class="selected" fill="#1D6EFE"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
ruoyi-ui/src/assets/icons/svg/102.svg
Normal file
1
ruoyi-ui/src/assets/icons/svg/102.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615815493881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25162" data-spm-anchor-id="a313x.7781069.0.i41" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M296 876.4c63.2-84.1 197.2-251.5 260.7-335.4l64.8-85.8-39-32.4-38.5-33.1-74 78.1c-72.2 76.6-214.8 236.7-287.2 313.1-18.2 19.2-27.3 43.7-25.6 68.9 2.8 42.3 33.1 67.7 75 63.4 25.2-2.6 47.9-15.7 63.8-36.8zM947.9 383.5c-9.6-8.1-19.3-16.3-29-24.4-10.8-9.1-21.6-18.3-32.3-27.3-3.7-3.2-7.2-4.3-12-3.9-2.5 0.2-25.1 2.5-31.4 3.1l-1.9 0.2c-22.7 1.7-34.3-8.3-36.6-31.5l-0.7-5.8c-0.6-5.1-1.1-10.2-1.3-15.3-0.2-6.8-3-11.9-9.4-17.5-32.8-28.6-71.5-62.5-110-97.3-16.3-14.8-34.9-26.2-56.9-34.9-48.5-19.6-94.3-24-140.1-13.9-22.6 5-43.7 13.4-63.8 25.4-11 6.6-6.6 23.6 6.2 23.8 24.6 0.3 46.8 4.6 68 12.9 49.2 19.3 79.8 60.9 81.6 111.3 0.8 23.2-4 46.2-14.2 68.4 14.5 12.4 29.3 25 43.8 37.5 12.4 10.6 24.5 21 35.7 30.7 12.9-14 15.9-16.7 18.4-18.5 15.7-10.9 34.4-13.4 50.2-6.9 5.1 2.1 10.2 5.3 15 9.4 21.7 18.1 27.4 43.6 15.3 68.6 5 4.1 10.1 8.2 15.1 12.3 20.1 16.6 41.1 33.8 62 49.8 3.1 2.3 5.6 3.6 7.2 3.5 0.8-0.1 3.3-0.7 8-5L926 431.9l24-29.9c4.9-6.3 6.2-11.4-2.1-18.5zM132 322.7c0.4-0.3 0.8-0.6 1.1-1.1 0.1-0.1 0.1-0.2 0.2-0.3 0.3-0.4 0.6-0.8 0.8-1.3 0.5-0.8 1-1.6 1.6-2.4 2.2-3.4 4.5-6.8 6.7-10.2 3-4.6 6.1-9.3 9.1-13.9 3.3-5 6.6-10 9.8-15 3-4.5 5.9-9 8.9-13.5 2.1-3.2 4.1-6.3 6.2-9.5 1.2-1.9 2.5-3.8 2.5-6.1 0-2.7-1.3-5.4-3.6-6.8-1.4-0.9-2.9-1.7-4.3-2.7l-44.2-28.4c-18.1-11.6-33.7-21.7-35.5-22.8l-8.7-5.6c-2.5-1.6-5.8 0.2-5.9 3.2l-0.1 10.4c0 2.7-0.1 5.3-0.2 7.8-0.2 5.4-0.4 10.6 0 15.8 3.4 43.1 15.6 76.8 36.3 100.1 0.5 0.5 0.9 1 1.4 1.6l0.2 0.2c0.1 0.1 0.2 0.2 0.2 0.3 4.3 4.9 12 5.1 17.1 0.5 0.2 0 0.3-0.2 0.4-0.3z" p-id="25163" data-spm-anchor-id="a313x.7781069.0.i38" class="selected" fill="#1D6EFE"></path><path d="M442.8 442.1c-23.7 25.2-55.4 59.7-89.2 96.8-28.7-37.9-60.6-72.8-101.9-97.1-26.9-15.7-56.9-24.4-88-26.3-15.1-0.8-35.4-0.6-43.8-16-6-10.6 7.6-21.8 13-29.9 13.7-20.7 27.2-41.3 40.8-61.9 19.5-29.4 39-58.9 58.5-88.3-7.8-5.5-34.4-22.6-42.8-28.1-21.6-13.8-43.9-28.4-62.7-45.8l-0.9-0.9c-2.9-3.2-3.7-7.9-2.3-11.8 2.5-6.5 9-9.9 27.9-14.7 10-2.6 20.6-4.7 23.1-5.1 20.3-2.4 39.9-2.7 58.4-0.8 30.3 3.4 72.8 14.3 103.6 49l1.3 1.6c17.2 20 29.2 44.5 33.9 70.6 4.6 24.8-4.2 49.6-1.8 74.7 2 20.6 8.5 40.2 18.3 58.2 14.8 27.4 35.8 50.4 57 73.1l-2.4 2.7zM759.7 835.8c-8.4 47.6-47.3 78.3-96.8 76.1-29.6-1.4-54.9-14.7-71.2-37.7-14.1-19.7-28.1-39.4-42.2-59.2l-75.6-106.5c36.2-46.1 72.1-92 99.3-127.6 54.5 59.9 109.1 119.6 164.5 178.7 19.2 20.6 27.1 47.6 22 76.2z" p-id="25164" data-spm-anchor-id="a313x.7781069.0.i42" class="selected" fill="#1D6EFE"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
1
ruoyi-ui/src/assets/icons/svg/103.svg
Normal file
1
ruoyi-ui/src/assets/icons/svg/103.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615815567023" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26008" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M549.948235 210.823529l72.884706 46.08c14.757647 9.336471 31.322353 14.155294 48.489412 14.155295H963.764706v542.117647H60.235294V210.823529h489.712941m8.734118-60.235294H30.117647c-16.564706 0-30.117647 13.552941-30.117647 30.117647v662.588236c0 16.564706 13.552941 30.117647 30.117647 30.117647h963.764706c16.564706 0 30.117647-13.552941 30.117647-30.117647V240.941176c0-16.564706-13.552941-30.117647-30.117647-30.117647H671.322353c-5.722353 0-11.444706-1.505882-16.263529-4.818823l-80.414118-50.898824a29.033412 29.033412 0 0 0-15.962353-4.517647z" fill="#1D6EFE" p-id="26009" data-spm-anchor-id="a313x.7781069.0.i58" class="selected"></path><path d="M421.647059 331.294118H150.588235c-16.564706 0-30.117647-13.552941-30.117647-30.117647s13.552941-30.117647 30.117647-30.117647h271.058824c16.564706 0 30.117647 13.552941 30.117647 30.117647s-13.552941 30.117647-30.117647 30.117647zM662.588235 421.647059h-30.117647c-16.564706 0-30.117647-13.552941-30.117647-30.117647s13.552941-30.117647 30.117647-30.117647h30.117647c16.564706 0 30.117647 13.552941 30.117647 30.117647s-13.552941 30.117647-30.117647 30.117647zM873.411765 421.647059h-90.352941c-16.564706 0-30.117647-13.552941-30.117648-30.117647s13.552941-30.117647 30.117648-30.117647h90.352941c16.564706 0 30.117647 13.552941 30.117647 30.117647s-13.552941 30.117647-30.117647 30.117647zM210.823529 421.647059H150.588235c-16.564706 0-30.117647-13.552941-30.117647-30.117647s13.552941-30.117647 30.117647-30.117647h60.235294c16.564706 0 30.117647 13.552941 30.117647 30.117647s-13.552941 30.117647-30.117647 30.117647zM388.216471 692.705882H271.058824v-50.29647h80.414117c16.564706 0 30.117647-13.552941 30.117647-30.117647s-13.552941-30.117647-30.117647-30.117647H271.058824v-50.296471h111.134117c16.564706 0 30.117647-13.552941 30.117647-30.117647s-13.552941-30.117647-30.117647-30.117647H240.941176c-16.564706 0-30.117647 13.552941-30.117647 30.117647V722.823529c0 16.564706 13.552941 30.117647 30.117647 30.117647h147.275295c16.564706 0 30.117647-13.552941 30.117647-30.117647s-13.552941-30.117647-30.117647-30.117647zM843.294118 692.705882h-117.157647v-190.644706c0-16.564706-13.552941-30.117647-30.117647-30.117647s-30.117647 13.552941-30.117648 30.117647V722.823529c0 16.564706 13.552941 30.117647 30.117648 30.117647H843.294118c16.564706 0 30.117647-13.552941 30.117647-30.117647s-13.552941-30.117647-30.117647-30.117647zM615.604706 471.943529h-147.275294c-16.564706 0-30.117647 13.552941-30.117647 30.117647s13.552941 30.117647 30.117647 30.117648H512V722.823529c0 16.564706 13.552941 30.117647 30.117647 30.117647s30.117647-13.552941 30.117647-30.117647v-190.644705h43.369412c16.564706 0 30.117647-13.552941 30.117647-30.117648s-13.251765-30.117647-30.117647-30.117647z" fill="#1D6EFE" p-id="26010" data-spm-anchor-id="a313x.7781069.0.i55" class="selected"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
1
ruoyi-ui/src/assets/icons/svg/104.svg
Normal file
1
ruoyi-ui/src/assets/icons/svg/104.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615815401139" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24238" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M0 0h1024v1024H0z" fill="#FFFFFF" p-id="24239"></path><path d="M944 250H80c-27.57 0-50-22.43-50-50V80c0-27.57 22.43-50 50-50h864c27.57 0 50 22.43 50 50v120c0 27.57-22.43 50-50 50z" fill="#D8DDE3" p-id="24240"></path><path d="M80 60c-11.028 0-20 8.972-20 20v120c0 11.028 8.972 20 20 20h864c11.028 0 20-8.972 20-20V80c0-11.028-8.972-20-20-20H80m0-60h864c44.182 0 80 35.818 80 80v120c0 44.182-35.818 80-80 80H80c-44.182 0-80-35.818-80-80V80C0 35.818 35.818 0 80 0z" fill="#1D6EFE" p-id="24241" data-spm-anchor-id="a313x.7781069.0.i19" class="selected"></path><path d="M944 622H80c-27.57 0-50-22.43-50-50v-120c0-27.57 22.43-50 50-50h864c27.57 0 50 22.43 50 50v120c0 27.57-22.43 50-50 50z" fill="#FFFFFF" p-id="24242"></path><path d="M80 432c-11.028 0-20 8.972-20 20v120c0 11.028 8.972 20 20 20h864c11.028 0 20-8.972 20-20v-120c0-11.028-8.972-20-20-20H80m0-60h864c44.182 0 80 35.818 80 80v120c0 44.182-35.818 80-80 80H80c-44.182 0-80-35.818-80-80v-120c0-44.182 35.818-80 80-80z" fill="#1D6EFE" p-id="24243" data-spm-anchor-id="a313x.7781069.0.i20" class="selected"></path><path d="M944 994H80c-27.57 0-50-22.43-50-50v-120c0-27.57 22.43-50 50-50h864c27.57 0 50 22.43 50 50v120c0 27.57-22.43 50-50 50z" fill="#D8DDE3" p-id="24244"></path><path d="M80 804c-11.028 0-20 8.972-20 20v120c0 11.028 8.972 20 20 20h864c11.028 0 20-8.972 20-20v-120c0-11.028-8.972-20-20-20H80m0-60h864c44.182 0 80 35.818 80 80v120c0 44.182-35.818 80-80 80H80c-44.182 0-80-35.818-80-80v-120c0-44.182 35.818-80 80-80z" fill="#1D6EFE" p-id="24245" data-spm-anchor-id="a313x.7781069.0.i21" class="selected"></path><path d="M708 100h156a40 40 0 0 1 0 80h-156a40 40 0 0 1 0-80z" fill="#1D6EFE" p-id="24246" data-spm-anchor-id="a313x.7781069.0.i16" class="selected"></path><path d="M708 472h156a40 40 0 0 1 0 80h-156a40 40 0 0 1 0-80z" fill="#FF402A" p-id="24247"></path><path d="M708 844h156a40 40 0 0 1 0 80h-156a40 40 0 0 1 0-80z" fill="#505873" p-id="24248" data-spm-anchor-id="a313x.7781069.0.i22" class="selected"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
1
ruoyi-ui/src/assets/icons/svg/105.svg
Normal file
1
ruoyi-ui/src/assets/icons/svg/105.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.0 KiB |
1
ruoyi-ui/src/assets/icons/svg/sx.svg
Normal file
1
ruoyi-ui/src/assets/icons/svg/sx.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1613659287526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5920" width="23" height="23"><path d="M513.3 101.9c-190.7 0-348.6 138.8-379.2 320.8H0l160.4 192.5 160.4-192.5H199C228.8 276.4 358.4 166 513.3 166c176.9 0 320.8 143.9 320.8 320.8S690.2 807.7 513.3 807.7c-78 0-148.7-29.1-204.4-75.6l-42.1 50.5c66.8 55.7 152.7 89.3 246.4 89.3 212.6 0 385-172.4 385-385s-172.2-385-384.9-385z" p-id="5921"></path></svg>
|
||||
|
After Width: | Height: | Size: 463 B |
BIN
ruoyi-ui/src/assets/image/1000009.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/1000009.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
ruoyi-ui/src/assets/image/1000168.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/1000168.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 731 KiB |
BIN
ruoyi-ui/src/assets/image/1000934.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/1000934.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 519 KiB |
BIN
ruoyi-ui/src/assets/image/1001498.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/1001498.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
ruoyi-ui/src/assets/image/2000087.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/2000087.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
BIN
ruoyi-ui/src/assets/image/2001159.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/2001159.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
BIN
ruoyi-ui/src/assets/image/2025181.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/2025181.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 430 KiB |
BIN
ruoyi-ui/src/assets/image/2026264.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/2026264.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 625 KiB |
BIN
ruoyi-ui/src/assets/image/2043428.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/2043428.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
ruoyi-ui/src/assets/image/308183.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/308183.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
ruoyi-ui/src/assets/image/308664.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/308664.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
ruoyi-ui/src/assets/image/309159.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/309159.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
ruoyi-ui/src/assets/image/312041.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/312041.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
ruoyi-ui/src/assets/image/315094.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/315094.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
BIN
ruoyi-ui/src/assets/image/315417.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/315417.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
ruoyi-ui/src/assets/image/315421.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/315421.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 593 KiB |
BIN
ruoyi-ui/src/assets/image/318721.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/318721.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 546 KiB |
BIN
ruoyi-ui/src/assets/image/319421.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/319421.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
BIN
ruoyi-ui/src/assets/image/319532.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/319532.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
ruoyi-ui/src/assets/image/323755.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/323755.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
BIN
ruoyi-ui/src/assets/image/324278.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/324278.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
BIN
ruoyi-ui/src/assets/image/325273.jpg
Normal file
BIN
ruoyi-ui/src/assets/image/325273.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
333
ruoyi-ui/src/views/bookmark/vuedraggable/index.vue
Normal file
333
ruoyi-ui/src/views/bookmark/vuedraggable/index.vue
Normal file
@ -0,0 +1,333 @@
|
||||
<template>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="350px" style="margin-bottom: 0px">
|
||||
<h3>自定义布局</h3>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<draggable
|
||||
class="dragArea list-group"
|
||||
:list="list1"
|
||||
:group="{ name: 'people', pull: 'clone', put: false }"
|
||||
@change="log"
|
||||
>
|
||||
<div
|
||||
class="list-group-item"
|
||||
v-for="element in list1"
|
||||
:key="element.id"
|
||||
>
|
||||
{{ element.name }}
|
||||
</div>
|
||||
</draggable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br/>
|
||||
<br/>
|
||||
--------------
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<draggable
|
||||
class="dragArea list-group"
|
||||
:list="list1"
|
||||
group="t1"
|
||||
@change="log"
|
||||
>
|
||||
<div
|
||||
class="list-group-item"
|
||||
v-for="element in list1"
|
||||
:key="element.id"
|
||||
>
|
||||
{{ element.name }}
|
||||
</div>
|
||||
</draggable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header>实时预览</el-header>
|
||||
|
||||
<!-- <el-main>-->
|
||||
<!-- <el-row>-->
|
||||
<!-- <el-col :span="24">-->
|
||||
<!-- <div class="grid-content bg-purple-dark">search</div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- <draggable-->
|
||||
<!-- class="dragArea list-group "-->
|
||||
<!-- :list="list2"-->
|
||||
<!-- group="people"-->
|
||||
<!-- @change="log"-->
|
||||
<!-- >-->
|
||||
<!-- <el-row>-->
|
||||
|
||||
<!-- <el-col-->
|
||||
<!-- :span="24"-->
|
||||
<!-- class="borderSolid"-->
|
||||
<!-- v-for="(element, idx) in list2"-->
|
||||
<!-- :key="element.id"-->
|
||||
<!-- :style="'height:'+ element.height +';width:'+element.width "-->
|
||||
<!-- >-->
|
||||
<!-- {{ element.name }}-->
|
||||
<!-- <p>{{ element.data.id }}</p>-->
|
||||
<!-- <p>{{ element.data.name }}</p>-->
|
||||
<!-- <p>{{ element.data.url }}</p>-->
|
||||
<!-- <p>{{ element.data.description }}</p>-->
|
||||
<!-- <i class="el-icon-delete" @click="removeAt2(idx)"></i>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- </draggable>-->
|
||||
|
||||
|
||||
|
||||
<!-- </el-main>-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-main>
|
||||
<el-row>
|
||||
<el-col :span="24"
|
||||
><div class="grid-content bg-purple-dark">search</div></el-col
|
||||
>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="2"> - </el-col>
|
||||
<!-- <el-col :span="8">-->
|
||||
<!-- <div class="grid-content bg-purple borderColor">-->
|
||||
<!-- <draggable-->
|
||||
<!-- class="dragArea list-group "-->
|
||||
<!-- :list="list2"-->
|
||||
<!-- group="people"-->
|
||||
<!-- @change="log"-->
|
||||
<!-- >-->
|
||||
<!-- <div-->
|
||||
<!-- class="borderSolid"-->
|
||||
<!-- v-for="(element, idx) in list2"-->
|
||||
<!-- :key="element.id"-->
|
||||
<!-- :style="'height:'+ element.height +';width:'+element.width "-->
|
||||
<!-- >-->
|
||||
<!-- {{ element.name }}-->
|
||||
<!-- <p>{{ element.data.id }}</p>-->
|
||||
<!-- <p>{{ element.data.name }}</p>-->
|
||||
<!-- <p>{{ element.data.url }}</p>-->
|
||||
<!-- <p>{{ element.data.description }}</p>-->
|
||||
<!-- <i class="el-icon-delete" @click="removeAt2(idx)"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- </draggable>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-col :span="11">
|
||||
<div class="grid-content bg-purple-light borderColor">
|
||||
<draggable
|
||||
class="dragArea list-group"
|
||||
:list="list3"
|
||||
group="people"
|
||||
@change="log"
|
||||
>
|
||||
<div
|
||||
class="borderSolid"
|
||||
v-for="(element, idx) in list3"
|
||||
:key="element.id"
|
||||
:style="'height:'+ element.height "
|
||||
>
|
||||
{{ element.name }}
|
||||
<p>{{ element.data.id }}</p>
|
||||
<p>{{ element.data.name }}</p>
|
||||
<p>{{ element.data.url }}</p>
|
||||
<p>{{ element.data.description }}</p>
|
||||
<i class="el-icon-delete" @click="removeAt3(idx)"></i>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2"> - </el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<div class="grid-content bg-purple-light borderColor">
|
||||
<draggable
|
||||
class="dragArea list-group"
|
||||
:list="list4"
|
||||
group="people"
|
||||
@change="log"
|
||||
>
|
||||
|
||||
|
||||
<el-card class="box-card" v-for="(element, idx) in list4"
|
||||
:key="element.id" :style="'height:'+ element.height ">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>卡片名称</span>
|
||||
|
||||
|
||||
<draggable class="dragArea list-group"
|
||||
:list="list8"
|
||||
group="people"
|
||||
>
|
||||
<a class="box-card" v-for="(element, idx) in list4"
|
||||
:key="element.id" :style="'height:'+ element.height ">
|
||||
|
||||
</a>
|
||||
|
||||
</draggable>
|
||||
<i class="el-icon-delete" style="float: right; padding: 3px 0" @click="removeAt4(idx)"></i>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{ "列表内容 " + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</draggable>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="1"> - </el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from "vuedraggable";
|
||||
export default {
|
||||
name: "clone",
|
||||
display: "Clone",
|
||||
order: 2,
|
||||
components: {
|
||||
draggable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list1: [
|
||||
{
|
||||
name: "热点新闻",
|
||||
id: 1,
|
||||
height:"800px",
|
||||
width:"400px",
|
||||
data: {
|
||||
id: 1,
|
||||
title: "百度书签",
|
||||
url: "https://www.baidu.com",
|
||||
description: "这是个百度的书签"
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "最近收藏",
|
||||
id: 2,
|
||||
height:"300px",
|
||||
width:"400px",
|
||||
data: {
|
||||
id: 1,
|
||||
title: "百度书签",
|
||||
url: "https://www.baidu.com",
|
||||
description: "这是个百度的书签",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "常用导航",
|
||||
id: 3,
|
||||
height:"300px",
|
||||
width:"400px",
|
||||
data: {
|
||||
id: 1,
|
||||
title: "百度书签",
|
||||
url: "https://www.baidu.com",
|
||||
description: "这是个百度的书签",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "热门推荐",
|
||||
id: 4,
|
||||
height:"300px",
|
||||
width:"400px",
|
||||
data: {
|
||||
id: 1,
|
||||
title: "百度书签",
|
||||
url: "https://www.baidu.com",
|
||||
description: "这是个百度的书签",
|
||||
},
|
||||
},
|
||||
],
|
||||
list2: [],
|
||||
list3: [],
|
||||
list4: [],
|
||||
list8: [],
|
||||
list9: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
log: function (evt) {
|
||||
window.console.log(evt);
|
||||
},
|
||||
removeAt2(idx) {
|
||||
this.list2.splice(idx, 1);
|
||||
},
|
||||
removeAt3(idx) {
|
||||
this.list3.splice(idx, 1);
|
||||
},
|
||||
removeAt4(idx) {
|
||||
this.list4.splice(idx, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-header,
|
||||
.el-footer {
|
||||
background-color: #b3c0d1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #d3dce6;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #e9eef3;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
.borderColor {
|
||||
border: 1px solid #404040;
|
||||
height: 600px;
|
||||
}
|
||||
.borderSolid {
|
||||
border: 1px solid #404040;
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user