移动端可拖拽模态框内Bootstrap datepicker无法弹出问题求助

问题根因 #

jQuery UI draggable 配合 Touch Punch 实现移动端拖拽时，默认会拦截模态框内所有元素的touch事件用于判断拖拽手势，导致日期输入框的触摸触发事件无法被Bootstrap Datepicker捕获，这也是注释掉draggable初始化后功能就恢复的核心原因。

解决方案 #

方案1：指定拖拽触发区域（推荐） #

当前代码已经有专门的拖拽提示区域#dragMe，只需要在初始化draggable时指定handle参数，仅允许该区域触发拖拽，其余区域的交互事件不受影响：

// 替换原有$('.calculator-modal').draggable();代码
$('.calculator-modal').draggable({
  handle: "#dragMe"
});

方案2：排除不需要拦截的交互元素 #

如果需要整个模态框都支持拖拽，可通过cancel参数指定不需要被拖拽事件拦截的元素类型，保证输入框、下拉框等交互元素的事件正常传递：

$('.calculator-modal').draggable({
  cancel: "input, select, button, .date-picker2, .calculatorForm *"
});

额外优化 #

修改完成后原代码中给日期输入框绑定的额外手动触发显示逻辑可以移除，datepicker的默认触发逻辑即可正常运行。

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