vue轮播图拖拽放置任意位置功能实现（拖动改变顺序）

我不是女神ヾ 2022-12-14 08:49 498阅读 0赞

<template>
        <div class="container" >
            <div class="topOperate flex-btw">
                <div class="left flex">
                    <div class="add">+</div>
                    <span class="text">Upload New Image(s)</span>
                </div>
                <div class="right flex">
                    <i class="iconfont icon45-01"></i>
                    <span class="text">Drag to reorder</span>
                </div>
            </div>
            <div class="uploadSwiper m-a">
                <div class="swiper-father pos-r">
                    <swiper class="swiper" :class="screenWidth <= 768 ? '' : 'swiper-no-swiping'" :options="swiperOption"  >
                        <swiper-slide class="J_file bs pos-r" v-for="(item,index) in list" :key="index" :data-obj="'J_file_'+index">
                            <div class="drop-left"></div>
                            <label :for="'J_file_'+index">
                                <div class="uploadBefore flex flex-col pos-a">
                                    <p>+</p>
                                    <span>Click to upload</span>
                                </div>
                            </label>
                            <input type="file" :id="'J_file_'+index" />
                            
                            <div class="imgPart w-h100 pos-a" :id="'J_img_'+index" v-if="index == 0 || index == 1">
                                <i class="iconfont icon30-01 pos-a"></i>
                                <img :src="item.pic" draggable="true" :data-obj="'J_file_'+index" alt />
                                <div class="editBtn pos-a pos-center"  @click="showPopup = true">
                                    <EditBtn></EditBtn>
                                </div>
                            </div>
                            <div class="drop-right"></div>
                        </swiper-slide>
                    </swiper>
                    <LeftBtn class="prev"></LeftBtn>
                    <RightBtn class="next"></RightBtn>
                </div>
            </div>
            <div class="writePart flex-btw">
                <div class="left">
                    <input class="titleWrite bs" type="text" placeholder="Add a post title" />
                    <div class="writeBoard"><Editor :height="1000" :toolbarItems="toolbarItems"></Editor></div>
                    <input class="titleWrite bs" type="text" placeholder="Category Tags
    " />
                </div>
                <div class="right">
                    <div class="contentBox bs">
                        <div class="titleWrap">
                            <i class="iconfont icon46-01"></i>
                            <span>Lastest Drafts</span>
                        </div>
                        <div class="item">
                            <div class="desc">Exploring life</div>
                            <ul class="pics">
                                <li class="pic" v-for="(item,index) in 3" :key="index">
                                    <img src="./../../../static/images/pic3.png" alt class="w-h100" />
                                </li>
                            </ul>
                        </div>
                        <div class="item">
                            <div class="desc">Exploring life</div>
                            <ul class="pics">
                                <li class="pic" v-for="(item,index) in 3" :key="index">
                                    <img src="./../../../static/images/pic3.png" alt class="w-h100" />
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="contentBox contentBox2 bs">
                        <div class="titleWrap flex">
                            <div class="logo">
                                <img src="./../../../static/images/logo3.png" alt class="w-h100" />
                            </div>
                            <span>Set Access Level</span>
                        </div>
                        <div class="selectWrap">
                            <ul class="select">
                                <li class="li flex">
                                    <label class="checkBox">
                                        <input type="checkbox" />
                                    </label>
                                    <span class="text">Tire 1 - Liketu Fans</span>
                                </li>
                                <li class="li flex">
                                    <label class="checkBox">
                                        <input type="checkbox" />
                                    </label>
                                    <span class="text">Tire 1 - Liketu Fans</span>
                                </li>
                                <li class="li flex">
                                    <label class="checkBox">
                                        <input type="checkbox" />
                                    </label>
                                    <span class="text">Tire 1 - Liketu Fans</span>
                                </li>
                                <li class="li flex">
                                    <label class="checkBox">
                                        <input type="checkbox" />
                                    </label>
                                    <span class="text">Tire 1 - Liketu Fans</span>
                                </li>
                            </ul>
                        </div>
                        <div class="selectWrap">
                            <ul class="select">
                                <li class="li flex">
                                    <label class="checkBox">
                                        <input type="checkbox" />
                                    </label>
                                    <span class="text">Tire 1 - Liketu Fans</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="contentBox contentBox2 contentBox3 bs">
                        <div class="selectWrap head">
                            <ul class="select">
                                <li class="li flex">
                                    <label class="checkBox">
                                        <input type="checkbox" />
                                    </label>
                                    <span class="text">Monetize Original Content?</span>
                                </li>
                            </ul>
                        </div>
                        <div class="selectWrap">
                            <ul class="select">
                                <li class="li flex">
                                    <label class="checkBox">
                                        <input type="checkbox" />
                                    </label>
                                    <span class="text">50%</span>
                                </li>
                                <li class="li flex">
                                    <label class="checkBox">
                                        <input type="checkbox" />
                                    </label>
                                    <span class="text">100%</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <button class="btn btnOri" @click="$skipNav('detail')">Post</button>
                </div>
            </div>
             <SwiperPopup v-if="showPopup" @getPopupShow="showPopupFromChild"></SwiperPopup>
        </div>
    </template>
    
    <script>
    
    import SwiperPopup from '../../components/SwiperPopup'
    export default { 
        data() { 
            return { 
                swiperOption: { 
                    slidesPerView: 9,
                    spaceBetween: 0,
                    pagination: { 
                        clickable: true,
                    },
                    navigation: { 
                        nextEl: '.next',
                        prevEl: '.prev',
                    },
                    breakpoints: { 
                        0: { 
                            slidesPerView: 2,
                        },
                        768: { 
                            slidesPerView: 3,
                        },
                        850: { 
                            slidesPerView: 4,
                        },
                        1000: { 
                            slidesPerView: 5,
                        },
                        1150: { 
                            slidesPerView: 6,
                        },
                        1430: { 
                            slidesPerView: 7,
                        },
                        1630: { 
                            slidesPerView: 8,
                        },
                        1870: { 
                            slidesPerView: 9,
                        },
                    },
                },
                positionX:0,
                positionY:0,
                showPopup: false,
                list:[
                    { pic:'./../../../static/images/upload.png'},
                    { pic:'./../../../static/images/face.png'},
                    { pic:'./../../../static/images/girl1.png'},
                    { pic:'./../../../static/images/logo.png'},
                    { pic:'./../../../static/images/head.jpeg'},
                    { pic:'./../../../static/images/upload.png'},
                    { pic:'./../../../static/images/face.png'},
                    { pic:'./../../../static/images/girl1.png'},
                    { pic:'./../../../static/images/logo.png'},
                ],
                toolbarItems: [
                      'heading',
                      'bold',
                      'italic',
                      'quote',
                      'link',
                ]
            }
        },
        components: {  SwiperPopup },
        props: ['screenWidth'],
        methods: { 
            move(e){ 
                console.log(e);
                let odiv = e.target;        //获取目标元素
                
                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft;
                let disY = e.clientY - odiv.offsetTop;
                console.log(disX,disY,e.target.getAttribute('data-obj'));
                document.onmousemove = (e)=>{        //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    let left = e.clientX - disX;    
                    let top = e.clientY - disY;
                    // console.log('left:' + left, 'top:' +top);
                    
                    //绑定元素位置到positionX和positionY上面
                    // this.positionX = top;
                    // this.positionY = left;
                    
                    // //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                };
                document.onmouseup = (e) => { 
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            },
            showPopupFromChild(val) { 
                if (!val) { 
                    this.showPopup = false
                }
            },  
        },
        mounted(){ 
            	$(document).ready(function() { 
    		
                    // 正在拖动的图片的父级DIV
                    var $srcImgDiv = null;
            
                    // 开始拖动
                    $(".J_file img").bind("dragstart", function() { 
                        $srcImgDiv = $(this).parent().parent();
                    });
                    // 拖动到.drop-left,.drop-right上方时触发的事件
                    $(".drop-left,.drop-right").bind("dragover", function(event) { 
                        
                        // 必须通过event.preventDefault()来设置允许拖放
                        event.preventDefault();
                    });
            
                    // 结束拖动放开鼠标的事件
                    $(".drop-left").bind("drop", function(event) { 
                        event.preventDefault();
                        if($srcImgDiv[0] != $(this).parent()[0]) { 
                            $(this).parent().before($srcImgDiv);
                        }
                    });
            
                    // 结束拖动放开鼠标的事件
                    $(".drop-right").bind("drop", function(event) { 
                        event.preventDefault();
                        if($srcImgDiv[0] != $(this).parent()[0]) { 
                            $(this).parent().after($srcImgDiv);
                        }
                    });
            
            
                });
        }
    }
    </script>
    
    <style scoped lang="less">
    .container { 
        .topOperate{ padding: 0 8%; margin:71px auto 52px;
            > .left{ 
                .add{ width:33px;height:33px;border-radius:50%;font-size:36px;font-family:PingHei;font-weight:bold;color:#FFFFFF;line-height:33px;background:#80C2EC;line-height:26px;text-align:center;margin-right:11px;}
                span{ font-size:33px;font-family:Arial;font-weight:400;color:#80c2ec;}}
                > .right{ 
                    i{ font-size:20px;color:#a9b7bf;margin-right:6px;}
                    span{ font-size:16px;font-family:Arial;font-weight:400;color:#a9b7bf;}}}
        .uploadSwiper{  padding: 0 10.5%;
            .swiper-father{ 
                .swiper-container{ padding:10px 0;margin:0px 78px;
                    .swiper-slide{ width:138px;height:202px;background:#fff; user-select: none;transition:all 0.5s; box-sizing: border-box;
                          .imgPart{    width:calc(100% - 12px);left:6px;background:#fff;top:0;border:1px dashed #d5d5d5;border-radius:10px;transition:all 0.5s;box-sizing: border-box;
                                &:hover{ box-shadow:3px 3px 5px 1px rgba(65,65,65,.15);}
                                > i{ color:#eb1c24;right:-10px;top:-11px;font-size:19px;cursor:pointer; z-index: 1;}
                                > img{ width:100%;height:100%;object-fit:cover;border-radius:10px;}
                                /deep/ .edit{ left:0;right:0;margin:0 auto;}
                          }
                          > input{ display:none;}
                          .uploadBefore{  box-sizing: border-box;   cursor: pointer;  border:1px dashed #d5d5d5; border-radius:10px;transition:all 0.5s;  padding-top: 33%;    box-sizing: border-box; width: calc(100% - 12px);  height:100%;left:0;right:0;margin:0 auto;  top:50%;transform:translateY(-50%);cursor:pointer;
                                &:hover{ box-shadow:3px 3px 5px 1px rgba(65,65,65,.15);}
                                > p{ font-size:70px;font-family:PingHei;font-weight:bold;color:#E9E9E9;line-height:26px;margin-bottom:40px;}
                                > span{ font-size:14px;font-family:Arial;font-weight:400;color:#909090;}
                          }
                          .drop-left{ float: left; width: 6px; height: 100%;z-index:-1;}
                          .drop-right{ float: right; width: 6px; height: 100%;z-index:-1;}
                    }
                }
            }
        }
        .writePart { padding: 0 10.5%;margin:70px 0 0;align-items:unset;
            > .left {  flex: 1;
                .titleWrite {  width:100%;border:1px solid #e2e2e2;height:60px;border-radius:10px;padding-left:34px;font-size:24px;font-family:Arial;font-weight:400;
                &::placeholder{ color:#e2e2e2;}}
                .writeBoard{     overflow: hidden;border:1px solid #e2e2e2; width: 100%; height: 1000px; border-radius:10px; margin:10px 0 ;}
            }
            > .right {  width: 308px; margin-left: 9px;
                .contentBox { padding:30px 22px 36px;margin-bottom:10px;background:#fff;border:1px solid #e2e2e2;border-radius:10px;
                    .titleWrap { margin-bottom: 13px;
                        > i { color: #80c2ec; font-size: 22px;}
                        > span { font-size:21px;font-family:Arial;font-weight:400;color:#4d4d4d;                    }
                    }
                    .item { padding:17px 0 26px;border-top:1px solid #e7e7e7;
                        .desc{ font-size:16px;font-family:Arial;font-weight:400;color:#909090;margin-bottom:19px;}
                        .pics { overflow: hidden;margin: 0 -3px;
                            .pic { float:left;width:85px;height:85px;border-radius:10px;margin:0 1px;
                               img{ border-radius:10px; transition: all 0.5s;
                                    &:hover{  transform: scale(1.05);}
                               }
                            }
                        }
                    }
                }
                .contentBox.contentBox2{ padding:33px 0 20px;
                    .titleWrap{ margin:0 22px 0;padding-bottom:17px;
                        .logo{ margin-right:10px;width:26px;height:26px;}
                    }
                    .selectWrap{ padding:17px 6px 5px;overflow:hidden;position:relative;
                        .select{ 
                            .li{ width:100%;height:37px;padding:0 20px;box-sizing:border-box;border-radius:50px;transition:all 0.5s;
                                &:hover{ background:#f7f7f7;}
                                .checkBox{ 
                                    input[type='checkbox']{ width:16px;height:16px;border:1px solid #e2e2e2;background-color:#fff;-webkit-appearance:none;border-radius:2px;outline:none;}
                                    input[type='checkbox']:checked{ width:16px;height:16px;position:relative;}
                                    input[type='checkbox']:checked::after{ content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;background:#20c0b8;        }
                                }
                                > span{ font-size:18px;font-family:Arial;font-weight:400;color:#808080;margin-left:8px;}
                            }
                        }
                        &::before{ content:'';position:absolute;left:0;right:0;top:0;margin:0 auto;width:85.5%;background:#e7e7e7;height:1px;}
                    }
                }
                .contentBox.contentBox2.contentBox3{ min-height:291px;margin-top:33px 0 10px;padding:13px 0 0;
                    .selectWrap{ 
                        .select{ 
                            .li{ 
                                .text{ color:#20c0b8;}
                            }
                        }
                    }
                    .selectWrap.head{ padding:0 6px 6px;
                        &::before{ display:none;}
                        .select{ 
                            .li{ 
                                .text{ color:#808080;}
                            }
                        }
                    }
                    .selectWrap{ 
                        .select{ 
                            .li{ 
                                 .text{ color:#20c0b8;}
                            }
                        }
                     }
                }
                > .btn { width:100%;height:61px;font-size:30px;border-radius:10px;font-family:Arial;font-weight:400;color:#ffffff;background:linear-gradient(to right,#2ec7c7,#78c9ec);
                  &:hover{ background:#20c0b8;}
                }
            }
        }
    }
    @media screen and (max-width :1200px){ 
    .container .uploadSwiper .swiper-father .swiper-container .swiper-slide .imgPart .edit{ display: none;}
    }
    @media screen and (max-width :1000px){ 
        .container .writePart{ flex-direction: column;}
        .container .writePart > .right{ margin:10px 0 0;width: 100%;}
        .container .writePart > .right .contentBox{ width: 100%;}
        .container .writePart > .right .contentBox .item .pics{ margin:0 -5px; }
        .container .writePart > .right .contentBox .item .pics .pic{  width: calc(33.3% - 10px); float: left; height: auto; margin:0 5px 10px;}
        .container .writePart > .right .contentBox .item .pics .pic img{ display: block;}
    }
    @media screen and (max-width :800px){ 
    }
    @media screen and (max-width :768px){ 
        .container .topOperate{ margin:20px 0;}
        .container .topOperate > .left span{ font-size: 18px;}
        .container .topOperate .right{  display: none;}
        .container .writePart{ margin: 20px 0 0;}
        .container .writePart > .left .writeBoard{ height: 300px;}
        .container .writePart > .left .titleWrite{ font-size: 16px; height: 40px; padding-left: 16px;}
        .container .writePart > .right .contentBox{  padding: 15px 16px ;}
        .container .writePart > .right .contentBox .item .desc{     margin-bottom: 10px;}
        .container .writePart > .right .contentBox .item{ padding:10px 0 0;}
        .container .writePart > .right .contentBox{  padding: 15px 16px 5px;}
        .container .writePart > .right .contentBox.contentBox2{  padding: 15px 16px 5px;}
        .container .writePart > .right .contentBox.contentBox2.contentBox3{  padding: 15px 16px 5px;}
        .container .writePart > .right .contentBox.contentBox2 .titleWrap{ margin:0;}
        .container .writePart > .right .contentBox.contentBox2 .selectWrap .select .li{  padding:0;}
        .container .writePart > .right .contentBox.contentBox2 .selectWrap{  padding: 5px 0;}
        .container .writePart > .right .contentBox.contentBox2 .selectWrap::before{  width:100%;}
        .container .writePart > .right .contentBox.contentBox2.contentBox3 .selectWrap.head{     padding: 0 0 6px;}
        .container .writePart > .right > .btn{ height: 40px;  font-size: 22px;  margin-bottom: 10px;  border-radius: 5px;}
        .container .writePart{ padding:  0 5%;}
        .container .mask .swiperTag{ padding: 0;}
        .container .mask .swiperTag .swiper-container{ width: 100%; margin:0;padding:0;}
        .container .uploadSwiper .swiper-father .swiper-container{ margin: 0;}
        .container .uploadSwiper .swiper-father .swiper-container .swiper-slide .imgPart .editBtn{ display: none;}
        
        
    }
    </style>

参考链接：[https://blog.csdn.net/xiao\_\_gui/article/details/25695025][https_blog.csdn.net_xiao_gui_article_details_25695025]

[https_blog.csdn.net_xiao_gui_article_details_25695025]: https://blog.csdn.net/xiao__gui/article/details/25695025