Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.11.2017, 21:33
Интересующийся
Отправить личное сообщение для WhiteFox Посмотреть профиль Найти все сообщения от WhiteFox
 
Регистрация: 11.05.2017
Сообщений: 27

Перетаскивание видимости обьекта мышкой
Доброго времени суток, помогите пожалуйста решить задачу с перетаскиванием карты, увеличения и уменьшения я как то сделал =)
<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/
Ответить с цитированием
  #2 (permalink)  
Старый 04.11.2017, 22:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

WhiteFox,
http://jqueryui.com/draggable/
Ответить с цитированием
  #3 (permalink)  
Старый 04.11.2017, 22:07
Интересующийся
Отправить личное сообщение для WhiteFox Посмотреть профиль Найти все сообщения от WhiteFox
 
Регистрация: 11.05.2017
Сообщений: 27

пишет что draggable не является функцией , это из за отсутсвия jquery ui?
Ответить с цитированием
  #4 (permalink)  
Старый 04.11.2017, 22:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

WhiteFox,
https://javascript.ru/forum/showthread.php?p=316647
Ответить с цитированием
  #5 (permalink)  
Старый 04.11.2017, 22:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от WhiteFox
это из за отсутсвия jquery ui?
да
Ответить с цитированием
  #6 (permalink)  
Старый 04.11.2017, 22:52
Интересующийся
Отправить личное сообщение для WhiteFox Посмотреть профиль Найти все сообщения от WhiteFox
 
Регистрация: 11.05.2017
Сообщений: 27

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

Последний раз редактировалось WhiteFox, 04.11.2017 в 23:03.
Ответить с цитированием
  #7 (permalink)  
Старый 04.11.2017, 22:58
Интересующийся
Отправить личное сообщение для WhiteFox Посмотреть профиль Найти все сообщения от WhiteFox
 
Регистрация: 11.05.2017
Сообщений: 27

containment: "parent" какой то нестабильный)
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2017, 00:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #9 (permalink)  
Старый 05.11.2017, 00:28
Интересующийся
Отправить личное сообщение для WhiteFox Посмотреть профиль Найти все сообщения от WhiteFox
 
Регистрация: 11.05.2017
Сообщений: 27

вниз и вправо норм а влево и вверх не тащит(
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2017, 01:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от WhiteFox
вниз и вправо норм а влево и вверх не тащит(
не понимаю
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
использование prototype для создания конструктора обьекта greenrow Общие вопросы Javascript 6 02.06.2016 20:03
Перетаскивание внутри ifram'a. kodemak Общие вопросы Javascript 2 14.01.2014 09:24
перетаскивание iframe Andrew89 Events/DOM/Window 2 19.04.2013 12:11
Перетаскивание картинок мышкой Speculant Общие вопросы Javascript 5 04.08.2012 15:37
увеличение картинки при наведении мышкой Sereban jQuery 10 31.08.2011 14:50