list中嵌套图标，如何实现拖动图标时list不会跟随滑动?

奔跑的狮子

list中嵌套图标，如何实现拖动图标时list不会跟随滑动?

行进的蜗牛

实现方法如下：

1. 通过block实现组件堆叠效果，使得image图标位于list组件上方，并将image的样式设置为“position: fixed”。

2. 通过监听image组件的touchmove触摸事件实现动态设置其位置，具体可参见“通用事件”中的“touchmove事件”和“TouchEvent类型说明”。

实现代码如下：

<template>
<div class="item-container">
<block>
<div class="container">
<list class="list" style="height: 100px;" for="{{this.dataList}}">
<list-item class="list-item" type="content">
<text>{{ $item.name }}</text>
</list-item>
</list>
</div>
<image style="position: fixed;left: {{this.clientX}};top:{{this.clientY}}" class="image" src="/Common/logo.png" ontouchmove="touchmove"></image>
</block>
</div>
</template>
<style>
  .item-container {
    margin-bottom: 50px;
    flex-direction: column;
  }
  .container {
    flex-direction: column;
  }
  .list {
    flex-direction: column;
  }
  .image {
    border-radius: 100px;
    height: 150px;
  }
  .list-item {
    border: 1px solid #c21f1f;
  }
</style>
<script>
  export default {
    data: {
      clientX: "",
      clientY: "",
      dataList: [
        { name: "Language" },
        { name: "Maths" },
        { name: "English" },
        { name: "PE" },
        { name: "History" },
        { name: "Geography" },
        { name: "Science" },
        { name: "Physics" },
        { name: "Chemical" },
        { name: "Biology" },
        { name: "Music" },
        { name: "Art" },
        { name: "Language1" },
        { name: "Maths1" },
        { name: "English1" },
        { name: "PE1" },
        { name: "History1" },
        { name: "Geography1" },
        { name: "Science1" },
        { name: "Physics1" },
        { name: "Chemical1" },
        { name: "Biology1" },
        { name: "Music1" },
        { name: "Art1" },
      ]
    },
    onInit: function () {
      this.$page.setTitleBar({ text: "Long press to drag the icon" });
      console.info("Application onInit");
    },
    onShow(options) {
      console.info("Application onShow");
    },
    onHide(options) {
      console.info("Application onHide");
    },
    touchmove: function (TouchEvent) {
      console.log(JSON.stringify(TouchEvent.changedTouches));
      this.clientX = (TouchEvent.changedTouches[0].clientX - 70) + "px"
      this.clientY = (TouchEvent.changedTouches[0].clientY - 70) + "px"
      console.log("clientX = " + TouchEvent.changedTouches[0].clientX);
      console.log("clientY = " + TouchEvent.changedTouches[0].clientY);
    }
  };
</script>