У меня есть элементы, обрабатываемые Bootstrap сортируемыми плагинами (x_panels), и внутри одного из них есть элемент, содержащий карту. Карта управляется перетаскиванием, как и сортируемые элементы. Поэтому, когда я пытаюсь перетащить карту, запускается событие сортировки, и я перемещаю всю панель. Мой вопрос, как предотвратить сортировку при перетаскивании внутри карты? Я пытался сделать контейнер панели ручкой, но он не работал вообще. Я также пытался прикрепить обработчик к 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();