在引导可排序元素内映射 - 停止拖动答案

【问题标题】：Map inside bootstrap sortable element - stop dragging在引导可排序元素内映射 - 停止拖动
【发布时间】：2020-02-28 08:34:03
【问题描述】：

我有由 Bootstrap 可排序插件 (x_panels) 处理的元素，在其中一个插件中，有一个包含地图的元素。地图是通过拖动来操作的，就像可排序的元素一样。因此，当我尝试拖动地图时，会触发 sortable 的 start 事件并移动整个面板。我的问题是在地图内拖动时如何防止排序？我试图让面板容器成为一个句柄，但它根本不起作用。我还尝试将处理程序附加到地图上的mousedown 和dragstart 事件并执行preventDefault() 和stopPropagation()，但它也没有帮助。

任何想法如何处理这个？

容器 HTML：

<div id="widget-container" class="row">
<div class="col-xs-12 col-sm-6 widget-holder" id="x17">
<div class="x_panel">
    <div class="x_title">
        <h2><i class="fa fa-area-chart"></i> Title
            <small id="date-from-to">
            </small>
        </h2>
        <ul class="nav navbar-right panel_toolbox" style="min-width: auto">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="modal" data-target="#modal-filter-{$data->id_widget_person}" role="button" aria-expanded="false">
                    <i class="fa fa-calendar"></i>
                </a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <!-- This is the map container -->
        <div id="map-container" class="gmap"></div> 
      </div>
    </div>
  </div>
</div>

#widget_container 包含所有可排序的元素。

可排序处理程序：

$("#widget-container").sortable({
                            containerSelector: "#widget-container",
                            itemSelector: ".widget-holder",
            placeholder: "col-sm-3 widget-placeholder",
                            start: function(e, ui) {
                                ui.placeholder.height(ui.item.height);
                                ui.placeholder.width(ui.item.width);
                            },
            stop: function (event, ui) {
                var data = $("#widget-container").sortable("toArray");
                                    console.log(data);
                $.ajax({
                    type: 'POST',
                    url: '/url.php',
                    data: {
                        data: data
                    },
                    success: function(res) {
                    }
                });
            }
        }).disableSelection();

【问题讨论】：

标签： javascript jquery twitter-bootstrap sorting bootstrap-4

【解决方案1】：

我已经通过将x_title 设置为具有 100% 面板宽度的手柄来对其进行整理，因此我只能通过抓住面板的上部来移动面板，这对我来说完全足够了。如果您对此特定问题仍有答案，请随时发布。

【讨论】：