vue使用sortablejs 如何取消点击input也拖拽

要取消在 input 上的拖拽，请使用 `cancel` 属性。在 `sortablejs` 中，`cancel` 属性指定了哪些元素不应该被排序。

例如，如果您的代码类似于以下代码：

<div id="list">
  <div class="item">
    <input type="text" value="Item 1">
  </div>
  <div class="item">
    <input type="text" value="Item 2">
  </div>
  <div class="item">
    <input type="text" value="Item 3">
  </div>
</div>

您可以通过以下方式取消在 `input` 元素上的拖拽：

new Sortable(document.getElementById('list'), {
  cancel: 'input'
});

这将使 `input` 元素不可排序，但其他元素仍然可以排序。

相关问题

vue使用sortablejs input无法获取焦点

这个问题可能是由于 SortableJS 拖拽事件和 input 输入事件冲突导致的。你可以尝试在 SortableJS 的拖拽事件中加入一些判断逻辑来解决这个问题。

例如，你可以在 `onStart` 事件中判断当前被拖拽的元素是否为 input，如果是，就将其 `disabled` 属性设置为 `true`，拖拽结束后再将其设置为 `false`，这样就可以避免拖拽事件和输入事件的冲突了。

具体实现可以参考下面的代码：

new Sortable(el, {
  onStart: function (evt) {
    var item = evt.item;
    if (item.nodeName.toLowerCase() === 'input') {
      item.disabled = true;
    }
  },
  onEnd: function (evt) {
    var item = evt.item;
    if (item.nodeName.toLowerCase() === 'input') {
      item.disabled = false;
      item.focus();
    }
  }
});

这样处理后，拖拽 input 元素时就不会出现无法获取焦点的问题了。

vue使用腾讯地图点击input框获取地址

要在Vue中使用腾讯地图，你需要先在HTML中引入腾讯地图API的JS文件，然后在Vue组件中对其进行调用。

以下是一个基本的示例，展示了如何在Vue中使用腾讯地图：

1. 在HTML中引入腾讯地图API的JS文件

<script type="text/javascript" src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

你需要将YOUR_KEY替换为你的腾讯地图API密钥。

2. 在Vue组件中创建一个input框和一个地图容器

<template>
  <div>
    <input type="text" v-model="address" @click="showMap">
    <div id="map"></div>
  </div>
</template>

3. 在Vue组件中编写相关的逻辑

<script>
export default {
  data() {
    return {
      address: '',
      map: null,
      marker: null
    }
  },
  mounted() {
    // 初始化地图
    this.map = new qq.maps.Map(document.getElementById("map"), {
      center: new qq.maps.LatLng(39.916527,116.397128),
      zoom: 13
    });
  },
  methods: {
    showMap() {
      // 显示地图
      let self = this;
      let geocoder = new qq.maps.Geocoder({
        complete: function(result){
          let location = result.detail.location;
          self.map.setCenter(location);
          self.marker = new qq.maps.Marker({
            position: location,
            map: self.map
          });
        }
      });
      geocoder.getLocation(this.address);
    }
  }
}
</script>

在这个示例中，当用户点击input框时，会触发showMap方法。showMap方法会根据用户输入的地址，通过腾讯地图API获取该地址的坐标，并在地图上展示该地址的位置。

当然，你需要将YOUR_KEY替换为你的腾讯地图API密钥。