Перетаскивание видимости обьекта мышкой
 

Доброго времени суток, помогите пожалуйста решить задачу с перетаскиванием карты, увеличения и уменьшения я как то сделал =)

<div class="map_wrap">
		<div class="zoom_button">
			<button class="plus"><input type="text" class="plusnumber" value="1" 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">

<!--****************************************-->
<!--Участок 5 Fill = Куплен: "#d50b3a", Продается: "#d1f35e-->
<path class="part" d="M 600.93408,450.63693 736.47516,426.2819 701.53098,393.72027 592.72749,414.10438 Z"
description-status="Участок - 5 Продается"
description-area="Площадь участка (соток) - 15.08"
description-price="Стоимость участка - 557,960.00 ₽"
fill="#d1f35e">
</path>
<!--****************************************-->
<img src="img/map.jpg" class="imgmap">
</svg>
</div>
</div>

function top() {
     var number = $(".plusnumber").val();
     var sum = (parseInt(number) + 1);
     if (sum >= 1&& sum <= 9) {
         $('.map').css('transform','scale(' + '1.' + sum + ')');
         $('.plusnumber').val(sum);
     }
 }
 function bottom() {
     var number = $(".plusnumber").val();
     var sum = (parseInt(number) - 1);
     if (sum >= 1&& sum <= 9) {
         $('.map').css('transform','scale(' + '1.' + sum + ')');
         $('.plusnumber').val(sum);
     }
 }


 $('.plus').click(function (){
     top();
 });
 $('.minus').click(function(){
    bottom();
});


 $('.map').bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
       top();
   }else {
       bottom();
   };
});

http://test.igrology.com/

WhiteFox,
http://jqueryui.com/draggable/

пишет что draggable не является функцией , это из за отсутсвия jquery ui?

WhiteFox,
https://javascript.ru/forum/showthread.php?p=316647

да

спасибо)
еще однео если не сложно, у меня нет фиксированых розмеров так как див просто увеличивается
помоги настроить политику сдерживания

containment: "parent" какой то нестабильный)

WhiteFox,
после

<script src="js/scripts.min.js"></script>

добавьте

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>

      $('.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");
            }
          }
        )
</script>

и
строка 24

<button class="plus"><input type="text" class="plusnumber" value="0" style="display: none;">+</button>

вниз и вправо норм а влево и вверх не тащит(

не понимаю

увеличил, и когда тащишь вправо или вниз то нормально перетягивается, а аналогично вверх или влево не до конца, как бы оно само делает некий участок со своей шириной и высотой по которому можно тащить карту

WhiteFox,
пока других вариантов нет