如何点击Muuri.js网格内下拉框时阻止触发拖拽事件？

嘿，这个问题我太熟悉了！Muuri默认会把整个网格项（item）都设为拖拽触发区域，所以点击下拉框的时候自然会触发拖拽事件。不过咱们可以通过Muuri的配置轻松搞定这个问题——用dragStartPredicate来过滤掉不需要触发拖拽的元素。

方法一：直接针对下拉框过滤 #

修改你的JS代码，给Muuri实例添加dragStartPredicate配置项：

var grid = new Muuri('.grid', {
  dragEnabled: true,
  dragStartPredicate: function(item, event) {
    // 检查点击目标是否是select或它的子元素，是的话就阻止拖拽
    return !event.target.closest('select');
  }
});

event.target.closest('select')会向上遍历DOM树，找到最近的<select>元素。如果找到，说明点击的是下拉框区域，这时候返回false，Muuri就不会启动拖拽了；反之返回true，正常触发拖拽。

方法二：用类名标记禁止拖拽的元素（更灵活） #

如果以后还有其他元素（比如按钮、输入框）不想触发拖拽，推荐用类名统一管理：

1. 给下拉框加上自定义类，比如no-drag：

<select class="no-drag" ng-change="changeChartType(selectedType)" ng-model="selectedType">
  <option ng-repeat="t in chartType" value={{t.type}}>{{t.dispName}}</option>
</select>

2. 修改Muuri的配置，判断点击目标是否包含这个类：

var grid = new Muuri('.grid', {
  dragEnabled: true,
  dragStartPredicate: function(item, event) {
    return !event.target.closest('.no-drag');
  }
});

这样以后只要给需要禁止拖拽的元素加上no-drag类，就能自动排除拖拽触发，非常方便。

为什么不用event.stopPropagation()？因为Muuri的拖拽事件监听是在网格项上的，有时候stopPropagation()可能会和其他框架（比如你用的Angular）的事件冲突，而dragStartPredicate是Muuri官方提供的过滤机制，更可靠也更符合框架设计。

内容的提问来源于stack exchange，提问作者avdnowhere