draggable控件结合轮播图使用的话,轮播图可视区是一个图的宽度,拖拽后被拖拽元素变成2张或者多张的宽度。

 <draggable v-model="Visual_List" class="draggable_box" ref="draggable_box" id="draggable_box">
                <transition-group type="transition" :name="'flip-list'" style="display:block" id="draggable_box_long">
                  <!-- 第1层 -->
                  <div v-for="(cdata, index) in Visual_List" :class="{'listitem':true,'check_class':cdata.order==check_data.order||cdata.order==hover_data.order}" :key="cdata.order" @click="check(cdata,index)" @mouseenter="checkHover(cdata,index)" @mouseleave="checkHover({},index)">
                    <div :style="{top:cdata.top_100?'100%':0}" class="LeftLayout act_left_layout" v-show='cdata.order==left_visual_data.order'>
                      <!-- <div class="left_til">选择添加组件样式</div> -->
                      <LeftLayout @addVisualList='addVisualList' :cdn_default='cdn_default'></LeftLayout>
                    </div>
                    <div class="id_box" v-if="cdata.type!='carousel'&&cdata.type!='tab'">
                      <span class="no">NO</span>{{cdata.order}}</div>
                    <Icon v-show='cdata.order==hover_data.order' color='#bbb' size='20' class="icon" type="md-close-circle" @click.stop.native="del(index)" />
                    <Icon v-show='cdata.order==hover_data.order' color='#59f' size='20' class='top_add_icon' type="md-add-circle" @click.stop.native="leftVisualShow(cdata,index,0)" />
                    <Icon v-show='cdata.order==hover_data.order' color='#59f' size='20' class='bot_add_icon' type="md-add-circle" @click.stop.native="leftVisualShow(cdata,index,1)" />
                    <ul>
                      <li class="list-item">
                        <!-- 图片组 -->
                        <PictureGroup :cdata='cdata' class="img_group draggable_item" v-if="cdata&&cdata.type==='picturegroup'"></PictureGroup>
                        <!-- 輪播圖 -->
                        <Carousel class="draggable_item" :cdata='cdata' v-else-if='cdata&&cdata.type==="carousel"'></Carousel>
                        <!-- 优惠券 -->
                        <Coupon class="draggable_item" :cdata='cdata' :options_change_list='options_change_list' v-else-if='cdata&&cdata.type==="coupon"' @delCoupon='delCoupon'></Coupon>
                        <!-- 标签 -->
                        <LabelNavigation class="draggable_item" v-else-if='cdata&&cdata.type==="tab"' :cdata='cdata'></LabelNavigation>
                        <!-- 商品 -->
                        <Commodity :cdata='cdata' class="draggable_item img_group" v-if="cdata&&cdata.type==='commodity'"></Commodity>
                      </li>
                    </ul>
                  </div>
                </transition-group>
              </draggable>

999749418-5bf63e9f9191a

阅读 1.9k
1 个回答
新手上路,请多包涵

没有大佬解答下吗,一直卡在这了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题