Bootstrap 模态（移动）内的日期选择器的可拖动阻塞打开

Question

我在让 Bootstrap 日期选择器显示在移动设备上时遇到问题。日期选择器位于可拖动模式内，在台式机/笔记本电脑上查看时一切正常。

我也在使用 Touch Punch 来处理移动设备上的可拖动性。

我试过：

更改包含脚本的顺序（目前是 jQuery， jQuery-UI, Bootstrap, Bootstrap 日期选择器)
禁用使模式可拖动的行（日期选择器在移动设备上激活，但模式卡在原位）
在附加点击事件处理程序时发生变化（在可拖动之后，在可拖动之前，与可拖动一起）
厚颜无耻地使用这个：$('.date-picker2 input').on('click',function(){ $(this).focus().blur();});
更改 bootstrap 日期选择器日历的 z-index，因为我认为它正在激活，只是没有显示
用一个简单的 alert("click?"); 附加自定义点击事件 - 什么也没做，这意味着点击没有被注册
在元素周围添加边框，以检查是否有任何内容与其他内容重叠，有效防止点击到达日期选择器

问题仍然存在。我猜 Chrome 和 iOS 的 Chrome 更新中有一些东西破坏了功能（以前可以工作）。

任何人都可以就如何进行提供任何建议吗？

笔可以在这里找到：https://codepen.io/hFrantz/full/eYRboew

代码如下

HTML

<div class="calculator-modal">
    <div style="margin: 10px 10px 0px 5px;">
        <button  class="btn btn-sm calculator-modal-close pull-right"><i class="fa fa-times text-danger"></i></button>
    </div>

    <div style="padding:0px 10px 10px 5px;">
        <div class="drag">
            <h5 id="dragMe" class="text-left text-primary" style="width:92%"><strong>Drag me!</strong></h5>
            <h4 class="text-left" >Calculator</h4>
            <div class="hr2"></div>

            <h3 class="text-left" style="margin-top:10px;"><strong class="priceCalculator">123</strong><small> per day</small></h3>
        </div>
        <div class="hr2"></div>

        <div class="calculatorForm">
            <form>
                <label>Date</label>
                <div class="input-group date-picker2 input-daterange" data-date="dd.mm.yyyy" data-date-format="dd.mm.yyyy">
                    <input class="form-control" type="text" id="calcStart" name="calcStart" value="28.09.2021">
                    <span class="input-group-addon"> do </span>
                    <input class="form-control" type="text" id="calcEnd" name="calcEnd" value="28.09.2021">
                </div>
                <br>
                <label>Persons</label>
                    <select class="form-control" id="selPersons">
                        <option class="persons" value="1">1</option>
                        <option class="persons" value="2">2</option>
                        <option class="persons" value="3">3</option>
                        <option class="persons" value="4">4</option>
                        <option class="persons" value="5">5</option>
                </select>
            </form>
        <br>
        <hr style="margin-bottom:10px">
        <div>
            <h4>
                <strong class="pull-left">Total 
                    <i class="fa fa-question-circle cursor-pointer tooltips" data-placement="right" data-original-title="Total cost"></i>
                </strong>
                <strong class="pull-right totalCalculator">123</strong>
            </h4>
        </div>
        </div>
        <br>
        <br>
        <div class="text-right">
            <button class="btn btn-default calculator-modal-close">Close</button>
        </div>
    </div>
</div>
<div class="calculator">
    <button id="calculator-btn" class="btn btn-danger"> <i class="icon-calculator"></i> </button>
</div>

CSS

.calculator {
    display: inline-block;
    padding: 2px;
    text-align: center;
    position: fixed;
    z-index: 1001;
    bottom: 80px;
    left: 10px;
}
#calculator-btn{
    padding: 15px;
    border-radius: 100% !important;
}
#calculator-btn>i{
    font-size: 20px !important;
}
.calculator-modal  {
    height: auto !important;
    width: 400px;
    background-color: #fff;
    display: none;
    padding:  0px 2px 2px 2px;
    text-align: center;
    position: fixed;
    z-index: 9998;
    bottom: 15px;
    left: 80px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.2);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
@media (max-width: 991px) {
    .calculator-modal  {
    /*  overflow-y:scroll;
        max-height: 500px; */
        
        width: 400px; 
    }
}
@media (max-width: 767px) {
    .calculator-modal  {
        max-height: auto;
        width: 350px;
    }
}
@media (max-width: 480px) {
    .calculator-modal  {
        height: auto;
        width: 90%; 
    }
    .datepicker {
        left: 60px !important;
    }
    .mobileNone {
        display: unset;
    }
    .parent {
        position:relative;
    }
    .scrollMeHorizontally {
        overflow-x: scroll !important;
    }
    .parent table {
        width: 110vw !important;
        max-width: 110vw !important;
    }
    .sRight {
        margin-right:-12px;
        transform: scale(0.8) rotate(-90deg);
    }
    .sLeft {
        margin-left:-12px;
        transform: scale(0.8) rotate(90deg);
    }
    .sRight, .sLeft {
        top: 57%;
    }
    table, table > thead > tr > th, table > tbody > tr > td {
        vertical-align: middle !important;
    }
}
.drag{
    cursor:pointer;
}

#dragMe {
    background-color: #428bc2;
    color: #fff;
    padding:7px;
}

JS

$('body').on('click', '#calculator-btn, .openCalculator', function(e){
    e.preventDefault();
    $('.calculator-modal').toggle();
    if($('.calculator-modal').css('display').trim() == 'none') {
        fixCalculator();
    }
});

$('.calculator-modal-close').click(function(e){
    e.preventDefault();
    $('.calculator-modal').hide();
    fixCalculator();
});

$('.date-picker2').datepicker({
    language: 'sr-latin',
    orientation: "left",
    autoclose: true,
    todayHighlight: true
});

$('body').on('click', '#calcStart', function(){ 
    $('.datepicker').removeClass('datepicker-orient-right');
    $('.datepicker').addClass('datepicker-orient-left');
    $('.datepicker2').show();
});

$('body').on('click touchstart', '#calcEnd', function(){
    $('.datepicker').removeClass('datepicker-orient-left');
    $('.datepicker').addClass('datepicker-orient-right');
    $('.datepicker2').show();
});

$('.calculator-modal').draggable();

function fixCalculator() {
    $('.calculator-modal')
        .css('inset','')
        .css('left','')
        .css('right','')
        .css('top','')
        .css('bottom','')
        .css('height','')
        .css('width','')
        .css('display','');
}

Answer 1

问题出在 TouchPunch 库上，我后来在这个 GitHub 帖子中发现：

https://github.com/furf/jquery-ui-touch-punch/issues/306

问题已通过对话底部的修复解决：

My fork has implemented a similar solution - it assumes that you mean a click if you hold your finger down for less than 500ms, or if you move your finger less than 10px in any direction

https://github.com/RWAP/jquery-ui-touch-punch

一旦我将旧的 TouchPunch 替换为编辑后的版本，并添加：

$('.date-picker2 input').on('click',function(){ $(this).focus().blur();});

最初的问题已经解决。

Bootstrap 模态（移动）内的日期选择器的可拖动阻塞打开

Draggable blocking opening of Bootstrap datepicker inside of modal (mobile)

jquery

twitter-bootstrap-3

datepicker

modal-dialog

draggable