feat(useDraggable): add stopPropagation option

[webfansplz]

Description

Close #1386

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[canyonwan]

DOM:
<div class="fixed z-50 cursor-move bg-e-tools-box-icon bg-no-repeat bg-full h-20 w-20" ref="toolsBoxRef" :style="style" @click="openModal()">tools box</div>

Method:

    const { width, height } = useWindowSize()

    const { style } = useDraggable(toolsBoxRef, {
      initialValue: { x: width.value - 120, y: height.value - 120 },
      stopPropagation: true
    })`

ENV:
"vite": "^2.9.8",
"vue": "^3.2.33",
"@vueuse/core": "^8.4.2",

Problem :
When I move him, when I release the mouse, triggered the click method, but i already set stopPropagation: true
option.

[Xdy1579883916]

<component
    :is="draggable ? UseDraggable : 'div'"
    class="logo"
    :initialValue="{ top: '50%', right: 0 }"
    :preventDefault="true"
    :stopPropagation="true"
  >
    <img
      width="120"
      draggable="false"
      src="xxxx.png"
      @click.stop.prevent="$emit('open')"
    />
  </component>

我使用usedraggable组件，当我释放鼠标时，也触发了click方法，但我已经设置了： ：stopPropagation=“true”；
我读了源代码，可能是以下问题造成的：

I use the usedraggable component， when I release the mouse, triggered the click method too, but i already set :
:stopPropagation="true"; I read the source code, which may be caused by the following problems：

[canyonwan]

<component
    :is="draggable ? UseDraggable : 'div'"
    class="logo"
    :initialValue="{ top: '50%', right: 0 }"
    :preventDefault="true"
    :stopPropagation="true"
  >
    <img
      width="120"
      draggable="false"
      src="xxxx.png"
      @click.stop.prevent="$emit('open')"
    />
  </component>

我使用usedraggable组件，当我释放鼠标时，也触发了click方法，但我已经设置了： ：stopPropagation=“true”； 我读了源代码，可能是以下问题造成的：

I use the usedraggable component， when I release the mouse, triggered the click method too, but i already set : :stopPropagation="true"; I read the source code, which may be caused by the following problems：

所以现在还要等他们修复是吗

[webfansplz]

<component
    :is="draggable ? UseDraggable : 'div'"
    class="logo"
    :initialValue="{ top: '50%', right: 0 }"
    :preventDefault="true"
    :stopPropagation="true"
  >
    <img
      width="120"
      draggable="false"
      src="xxxx.png"
      @click.stop.prevent="$emit('open')"
    />
  </component>

我使用usedraggable组件，当我释放鼠标时，也触发了click方法，但我已经设置了： ：stopPropagation=“true”； 我读了源代码，可能是以下问题造成的：
I use the usedraggable component， when I release the mouse, triggered the click method too, but i already set : :stopPropagation="true"; I read the source code, which may be caused by the following problems：

所以现在还要等他们修复是吗

PR已经合并,等发版哈

[canyonwan]

<component
    :is="draggable ? UseDraggable : 'div'"
    class="logo"
    :initialValue="{ top: '50%', right: 0 }"
    :preventDefault="true"
    :stopPropagation="true"
  >
    <img
      width="120"
      draggable="false"
      src="xxxx.png"
      @click.stop.prevent="$emit('open')"
    />
  </component>

我使用usedraggable组件，当我释放鼠标时，也触发了click方法，但我已经设置了： ：stopPropagation=“true”； 我读了源代码，可能是以下问题造成的：
I use the usedraggable component， when I release the mouse, triggered the click method too, but i already set : :stopPropagation="true"; I read the source code, which may be caused by the following problems：

所以现在还要等他们修复是吗

PR已经合并,等发版哈

我已经将vueuse升级到了8.6.0 但是我这个还是不行 不过我用的不是组件的形式 而是像这样#1391 (comment)

[canyonwan]

@webfansplz

DOM: <div class="fixed z-50 cursor-move bg-e-tools-box-icon bg-no-repeat bg-full h-20 w-20" ref="toolsBoxRef" :style="style" @click="openModal()">tools box</div>

Method:

    const { width, height } = useWindowSize()

    const { style } = useDraggable(toolsBoxRef, {
      initialValue: { x: width.value - 120, y: height.value - 120 },
      stopPropagation: true
    })`

ENV: "vite": "^2.9.8", "vue": "^3.2.33", "@vueuse/core": "^8.4.2",

Problem : When I move him, when I release the mouse, triggered the click method, but i already set stopPropagation: true option.

@webfansplz 像我这样还是不行

[canyonwan]

<component
    :is="draggable ? UseDraggable : 'div'"
    class="logo"
    :initialValue="{ top: '50%', right: 0 }"
    :preventDefault="true"
    :stopPropagation="true"
  >
    <img
      width="120"
      draggable="false"
      src="xxxx.png"
      @click.stop.prevent="$emit('open')"
    />
  </component>

我使用usedraggable组件，当我释放鼠标时，也触发了click方法，但我已经设置了： ：stopPropagation=“true”； 我读了源代码，可能是以下问题造成的：

I use the usedraggable component， when I release the mouse, triggered the click method too, but i already set : :stopPropagation="true"; I read the source code, which may be caused by the following problems：

请问你是怎么引入的 Draggable组件的 我这样引入不对

[DamonCais]

It seems that the stopPropagation option was not working.

https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wAjAAGSbEyak9bYLY7fYgI4nAhEHGIPHDGbWZ7sLhnDFfFA-GRyBS8ADCrAiiCgf3MrBMKBu2Fk+UKKkleDArGQMPkGWhshQCKRIBRgxGYwEQmms2GbI5XMQJPJlOpG0Q2z2hwAuswjHQDMa0KAAIJgMCTBboUCpLUGCCpIgAHio2QAOuYVPBJFQALzpkAAPxqUQoMwM2YgYAoABZC5mVCowAnuAWQDMVTZpOXu4h6sFaMhe12OA2s7p2+JrDZx03air23h5Kw5yoAHyZxsqVPZFTWIztzyFlRoZChINTi+IE-nkKXwva3VytA1OibEGFzdZpu74jfpsmzUCo-AIABCFQAEkXDwFxpBUYBgE2A4jgQ4AQhQrcf0A5NSgCBJzHOKAglgdtUnPL9yOkZNhjw-p5AAnDhjTf9tybbcaJY78sM47J12eYVpCIOgtTqeDgH8G4AFl2EhA4ag4WYVAAcgdG5OTqRBlKwkTtQ4cT90QEx5KMRTYOUhZtKyUT9IQyTEGAhB4AgUogxUEyzJUtTbidKzM07c8VE8FQ80MoxtGwUgInsLCAoMzZGBUEJErvNz5NCvFHPgZzXMQbRPES4BtzMGFDEUQxyFfCTNlfWtSUSkJatJdzGG3c9vAABUUyBnJfaQOHITMDhi7B-PkQKqJCnREHsPN1yKrMAqlRBJi8eB8vsABuIbGWYSU6jTXBUijcgYxAOMW0TM4-23BdpCXFc11KeB2yCeA+goABWUlmqoSoYDQP6OBgL6frXIwg02dsSwrNdUk2e7C24Uc1zAdtGieg7+3bRT+BoKhx0Y5NkEgcx4cRkBa02Awv0QlRiAqtIUJokmIGwInWbJz0KeQWCgYBt6PoATh+tx-rQbxoGCEJQZPPAyIoDGQHXGS8TQlQE1KYLmbuUnv14-8BMkGQiBoANsEQLrvGQbQFqbTXPFfAF+t8VqswZgxKpUAA5Ug8C1jg3eGxkUKAA

[Kuohao-wu]

@DamonCais Because the stopProgation is resolve the draggable target element event bubbling. You can try this way to trigger custom click event instead of the native click.

demo