If the draggable control is used in conjunction with a broadcast image, the visual area of the broadcast image is the width of a graph, and the dragged element is changed to a width of two or more sheets after dragging.

 <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="-sharpbbb" size="20" class="icon" type="md-close-circle" @click.stop.native="del(index)" />
                    <Icon v-show="cdata.order==hover_data.order" color="-sharp59f" 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="-sharp59f" 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