拖动有点问题

[JHeLiu]

当我使用组件时候无法拖动

 <VueDraggable v-model="productImages" animation="150" handle=".product-image-header-drag">
<ul>
 <li  v-for="(item, index) in productImages" :key="index"></li>
</ul>
 </VueDraggable>


<script lang="ts" setup>
const productImages = ref<[]>([]);
</script >

当我使用指令的时候，数据无法排序，但是可以拖动，但我table tr 是正常的

<ul v-draggable="[productImages, { animation: 300, onUpdate: onUpdate, handle: '.product-image-header-drag' }]">
 <li  v-for="(item, index) in productImages" :key="index"></li>
</ul>


<script lang="ts" setup>
const productImages = ref<[]>([]);
</script >

测试发现，它无法对 ul li 元素起作用， 是我的使用方法不对吗？ 还是它不支持 ul 元素

当我改成 div 结构的时候它生效了

还有一个问题，当我的数据从另外一个数组直接赋值的时候 它也是不生效

<script lang="ts" setup>
const productImages = ref<ProductModel.Image[]>([]);
const producOptions = ref<ProductModel.Options[]>([]);
const producVariants = ref<ProductModel.Variant[]>([]);

 //从服务器请求数据
  let value = await ProductService.getAsync();

  productImages.value = value.images;  //数据无法排序
  producOptions.value = value.options; //数据无法排序
  producVariants.value = value.variants; //正常 最后一个它既然正常

//该方法数据正常排序
   value.images.forEach(item => {
            productImages.value.push(item)
      })
value.options.forEach(item => {
            producOptions.value.push(item)
        })
  value.variants.forEach(item => {
            producVariants.value.push(item)
        })


</script >

这应该是vue内置机制问题，可以优化它的问题吗？

这是类

/**
 * 产品信息
 */
export namespace ProductModel {

    /**基类 */
    export class Base {

        /**
         * 产品描述
         */
        body_html: string = "";

        /**
         * 创建日期
         */
        created_at?: string;


        /**产品id */
        id: string = "";

        /**
         * 对象图片
         */
        images: Image[] = [];

        /**
         * 自定义产品属性。例如，大小、颜色和材料。每个产品最多可以有 3 个选项
         */
        options: Options[] = [];


        /**产品的分类 */
        product_type: string = "";


        /**发布时间 */
        published_at?: string;

        /**发布到销售点渠道 */
        published_scope: string = "";

        /**产品的状态  active=活跃 archived=下架 draft=草稿 */
        status: string = "active";

        /** 筛选和搜索的逗号分隔标记字符串 一个产品最多可以有 250 个标签。每个标签最多可包含 255 个字符。 */
        tags: string = "";

        /**产品名称 */
        title: string = "";

        /**修改时间 */
        updated_at?: string;

        /**多属性 */
        variants: Variant[] = [];

        /**厂商名称 */
        vendor: string = "";
    }

    /**商品图片 */
    export class Image {
        /**
         * 商品图片的唯一数字标识符。
         */
        id: string = "0";
        /**
         * 产品图像在列表中的顺序。第一个产品图片位于位置 1，是商品的“主”图片。
         */
        position: number = 0;

        /**
         * 产品图像在列表中的顺序。第一个产品图片位于位置 1，是商品的“主”图片。
         */
        product_id: string = "0";
        /**
         * 与图像关联的变体 ID 数组
         */
        variant_ids: string[] = [];
        /**
         * 图片地址
         */
        src: string = "";
        /**
         * 上传时确定的图像的宽度尺寸
         */
        width?: number;
        /**
         * 上传时确定的图像的高度尺寸
         */
        height?: number;

        /**创建时间 */
        created_at?: string;

        /**修改时间 */
        updated_at?: string;

        /**是否选中 */
        _vIsSelected?: boolean;

        /**显示操作 */
        _vShowTools?: boolean

    }

    /**SKU 属性选项值 */
    export class Options {
        /**
         * id
         */
        id: string = "0";

        /**商品ID */
        product_id: string = "0";

        /**属性选项key */
        name: string = "";

        /**排序位置 */
        position: number = 1;

        /**属性选项值 */
        values: string[] = [];

        /**验证key */
        _validateName?: boolean;


        /**验证选项值  */
        _validateValues?: number[]
    }

    /**商品属性 */
    export class Variant {


        /**id */
        id: string = "0";

        /**
         * 商品的条形码、UPC 或 ISBN 编号
         */
        barcode?: string;

        /**创建日期 */
        created_at?: string = "";

        /**
         * 调整或销售前商品的原始价格
         */
        compare_at_price: string = "";

        /**储存产品多属性的履行服务的句柄 */
        fulfillment_service: string = "manual";


        /**产品变型的重量（以克为单位） */
        grams: number = 0;

        /**
         * 产品图片的唯一数字标识符。 图片必须与多属性关联到同一商品
         */
        image_id: string = "0";

        /**清单项的唯一标识符，在清单 API 中用于查询清单信息 */
        inventory_item_id: string = "0";

        /**跟踪产品多属性的库存物料数量的履行服务。 有效值  shopify  null */
        inventory_management?: string;


        /**是否允许客户在产品多属性缺货时下订单。有效值  deny=不允许  continue=允许 */
        inventory_policy: string = "deny";

        /**所有位置的广告资源汇总。若要调整特定位置的库存 */
        inventory_quantity?: string = "";

        /**
         * 选项值 option1  
         */
        option1?: string;

        /**
         * 选项值  option2 option3
         */
        option2?: string;

        /**
         * 选项值   option3
         */
        option3?: string;

        /**多属性的呈现价格列表 */
        presentment_prices?: any = {};

        /**产品多属性的价格 */
        price: string = "0";

        /**产品ID */
        product_id: string = "0";

        /** */
        sku: string = "";

        /**销售产品变型时是否收取税费 */
        taxable: boolean = false;

        /**
         * 产品变型的标题。该字段是和字段的串联。您只能使用这些字段间接更新。
         */
        title: string = "";

        /**
         * 单位值
         */
        weight: number = 0;

        /**
         * 单位选项值 g=克 kg=千克 oz=盎司 lb=磅
         */
        weight_unit: string = "g";

    }
}

[Alfred-Skyblue]

关于 ui li 的使用方式，请参考官网演示，另外您所描述的获取服务端数据无法使用的问题，请提供最小复制链接，以帮助我们更好的解决问题，谢谢