防止在Vue中输入类型范围内的默认拖动答案

【问题标题】：Prevent default drag in input type range in Vue防止在Vue中输入类型范围内的默认拖动
【发布时间】：2021-12-02 19:07:41
【问题描述】：

有什么方法可以防止输入范围的默认拖动功能，而不影响点击功能？用户需要通过单击而不是拖动来更改值。

<input   
  type="range"
  min="0"
  max="100"
  step="1"
  class="custom-audio-slider"
/>

演示：https://www.w3schools.com/code/tryit.asp?filename=GVF5ZH6S3HSF

【问题讨论】：

希望对您有所帮助developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
不添加 draggable:false 没有帮助。在@drsaud 上面添加了代码 sn-p
你正在与元素的意图作斗争——这样的努力往往会以混乱告终。如果点击很重要，请查看常规输入字段、单选按钮或下拉菜单。旁注：尝试使用 jsfiddle 或 codepen.io 等代码共享网站。

标签： javascript html css vue.js events

【解决方案1】：

尝试如下 sn-p:

new Vue({
  el: '#demo',
  data() {
    return {
      value: 7,
      drag: false,
      move: false
    }
  },
  methods: {
    dragging() {
      this.drag = true
    },
    stopDragging() {
      this.drag = false
      this.move = false
    },
    moving() {
      if(this.drag) {
        this.move = true
      }
    },
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <span id="valBox"></span>
  <div @mouseover="stopDragging">
    <input type="range" min="0" max="100" step="1" v-model="value" :disabled ="move"
     @mousemove="moving" @mousedown="dragging" @mouseup="stopDragging">
     <p>{{ value }}</p>
   </div>
</div>

【讨论】：