Олег Блохин
4 сообщения
#6 лет назад
Доброго времени суток. Помогите пожалуйста решить последнюю проблемку с скриптом перед сдачей работы. Сделал карту svg, увеличения через transform: scale(), и перетаскивание через функцию draggable, вот с последней возникли проблемы. В документации есть замечательная опция containment которая сдерживает элемент в обертке, но решения немного не подходит к моей проблеме,
проблема в том что когда увеличиваешь, вправо и вниз нормально перетаскивается а влево и вверх нет...
сама карта test.igrology.com
html
<div class="map_wrap">
<div class="zoom_button">
<button class="plus"><input type="text" class="plusnumber" value="0" style="display: none;">+</button>
<button class="minus"><input type="text" class="minusnumber" style="display: none;">-</button>
</div>
<div class="map">
<svg viewBox="0 0 1821.3333 1138.6667">
<!--Участок 1 Fill = Куплен: "#d50b3a", Продается: "#d1f35e"-->
<path class="part" d="m 510.39688,236.47144 24.88449,32.56162 67.50581,-17.47209 c -12.0776,-15.78552 -25.51801,-29.2997 -39.7093,-41.5624 z" 
description-status="Участок - 1 Продается"
description-area="Площадь участка (соток) - 10.25"
description-price="Стоимость участка - 379,250.00 ₽"
fill="#d1f35e">
</path>
<!--****************************************-->

<img src="img/map.jpg" class="imgmap">
</svg>
</div>
И сам скрипт перетаскивания:
$('.map'.draggable(
 {
  drag: function (event, ui) {
          var n = $('.plusnumber'.val()/10;
          var h = -$(this).parent().height()/2*n,
          w = -$(this).parent().width()/2*n; 
          ui.position.left > 0 && (ui.position.left = 0);
          ui.position.top > 0 && (ui.position.top = 0);
          ui.position.left < w && (ui.position.left = w+"px";
          ui.position.top < h && (ui.position.top = h+"px";
      }
  }
  );
Может кто сталкивался, буду благодарен за любую подсказку
Трушео Андре
1 сообщение
#6 лет назад
Может, если svg, лучше увеличивать всё же с помощью width/height (ну, или соответствующих css свойств)? Так, по идее, svg будет более чётко перерисовываться, да и основная проблема с верхней и левой границей должна исчезнуть.. Ну, а если уже transform, то задать transform-origin: 0 0.
Олег Блохин
4 сообщения
#6 лет назад
Спасибо большое добрый человек) ты моя спаситель!)