javascript - 在引导可排序元素内映射

问题描述

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

标签： javascriptjquerytwitter-bootstrapsortingbootstrap-4

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

问题描述

解决方案

推荐阅读