Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2012, 04:24
Новичок на форуме
Отправить личное сообщение для DarkDiabolik Посмотреть профиль Найти все сообщения от DarkDiabolik
 
Регистрация: 19.06.2012
Сообщений: 8

Перемещение скролла внутри блока
Интересует как это можно реализовать допустим скроллы в св-ах будут скрыты и нужно просмотривать содержимое внутри див блока, зажимая кливишу мышки и как бы перетаскивая содержимое внутренности.
Были идеи по нажатию мышки считать изначальные координаты потом добавлять просто разницу смещения в scrollLeft и scrollTop, однако дальше идеи это так и не ушло, сколько не пробовал всё никак не получалось работоспособного кода, возможно из-за того, что требовалось сначала использовать функции mousedown а в ней mouseover для постоянного плавного перемещения скролла. Искал отдельные плагины наткнулся на CustomerScroll и ScrollTo, но мне кажеться они не могут реализовать, то что мне нужно.
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2012, 09:05
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

а причём события скрола если у вас не скрол а drag and drop ?
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2012, 10:33
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<div id="myDiv" style="position: fixed; width: 50%; height: 50%; background: lightgrey; overflow: hidden;">
  <div id="div1">
  </div>
</div>

<script>
window.onload = function () {//onload begin
  var myDiv = document.getElementById('myDiv');
  var div1 = document.getElementById('div1');

  var str="";
  for (var i = 0; i < 51; i++) {
    for (var j = 0; j < 51; j++) {
      str += i;
    }
    str += '<br>';
  }
  div1.innerHTML = str;


  myDiv.onselectstart = function () {return false}

  myDiv.onmousedown = function (e) {//onmousedown begin
    e = e || event;
    myDiv.style.cursor = 'pointer';
    myDiv.style.overflow = 'scroll';
    var y0 = e.clientY;
    var x0 = e.clientX;
 
    myDiv.onmousemove = function (e) {//onmousemove begin
      e = e || event;
 
      var y = e.clientY;
      var defY = myDiv.scrollHeight - myDiv.offsetHeight - myDiv.scrollTop ;

      if (y > y0 && defY > 0) {
        myDiv.scrollTop += 20;
       } else  if (y < y0) {
         myDiv.scrollTop -= 20;
       }
      y0 = y; 
 
      var x = e.clientX;
      var defX = myDiv.scrollWidth - myDiv.offsetWidth - myDiv.scrollLeft ;

      if (x > x0 && defX > 0) {
        myDiv.scrollLeft += 20;
       } else  if (x < x0) {
         myDiv.scrollLeft -= 20;
       }
      x0 = x; 

    }//onmousemove end

  }//onmousedown end

  document.onmouseup = function () {
   myDiv.style.cursor = 'default';
   myDiv.style.overflow = 'hidden';
   myDiv.onmousemove = null;
  }

}//onload end

</script>


<div id="myDiv" style="position: fixed; width: 50%; height: 50%; background: lightgrey; overflow: hidden;">
  <div id="div1">
  </div>
</div>

<script>
window.onload = function () {//onload begin
  var myDiv = document.getElementById('myDiv');
  var div1 = document.getElementById('div1');

  var str="";
  for (var i = 0; i < 51; i++) {
    for (var j = 0; j < 51; j++) {
      str += i;
    }
    str += '<br>';
  }
  div1.innerHTML = str;


  myDiv.onselectstart = function () {return false}

  myDiv.onmousedown = function (e) {//onmousedown begin
    e = e || event;
    myDiv.style.cursor = 'pointer';
    myDiv.style.overflow = 'scroll';

    var y0 = e.clientY;
    var x0 = e.clientX;
 
    myDiv.onmousemove = function (e) {//onmousemove begin
      e = e || event;
 
      var y = e.clientY;

      if (y > y0) {
        myDiv.scrollTop -= 20;
       } else  if (y < y0) {
         myDiv.scrollTop += 20;
       }
      y0 = y; 
 
      var x = e.clientX;
 
     if (x > x0) {
        myDiv.scrollLeft -= 20;
       } else  if (x < x0) {
         myDiv.scrollLeft += 20;
       }
      x0 = x; 

    }//onmousemove end

  }//onmousedown end

  document.onmouseup = function () {
   myDiv.style.cursor = 'default';
   myDiv.style.overflow = 'hidden';
   myDiv.onmousemove = null;
  }

}//onload end

</script>

Последний раз редактировалось bes, 23.06.2012 в 11:30.
Ответить с цитированием
  #4 (permalink)  
Старый 22.06.2012, 04:22
Новичок на форуме
Отправить личное сообщение для DarkDiabolik Посмотреть профиль Найти все сообщения от DarkDiabolik
 
Регистрация: 19.06.2012
Сообщений: 8

Спасибо большое работает, я не сильно разбираюсь в ajax мозгов хватило дописать пару строк для того чтобы вправо влево тоже делал, но не можете показать как это сделать именно на jQuery, мне этот код не очень понятен.
Ответить с цитированием
  #5 (permalink)  
Старый 22.06.2012, 10:22
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Вроде ничего сложного, для вправо-влево добавить x как аналог y, ну и можно добавить пару условий, для того, чтобы на границах не происходило подёргиваний (и не совсем понял причём тут ajax).
Из этого материала должно стать понятно как происходит расчёт.
http://learn.javascript.ru/view-and-position
и можно ещё почитать вот эти рассуждения
Учебник JavaScript и jQuery
Ответить с цитированием
  #6 (permalink)  
Старый 22.06.2012, 14:56
Новичок на форуме
Отправить личное сообщение для DarkDiabolik Посмотреть профиль Найти все сообщения от DarkDiabolik
 
Регистрация: 19.06.2012
Сообщений: 8

Спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 23.06.2012, 11:46
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Кстати, заметил одну особенность хрома: при смене курсора по onmousedown прорисовка происходит не сразу, а только после смешения курсора с исходного положения, в FF, IE и Opera сразу.
<div style="background: green; height: 100px"
  onmousedown="this.style.cursor = 'pointer'"
  onmouseup="this.style.cursor = 'default'"
  onselectstart = "return false"
>
</div>
Ответить с цитированием
  #8 (permalink)  
Старый 23.06.2012, 15:15
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

bes,
Чот было подобное, боролся добавкой по событию, кратковременного принудилово A.onclick() на некий иной элемент
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение блока при скроллинге region029 jQuery 11 06.10.2013 22:44
По клику на ссылку меняем содержимое внутри блока goooooch Общие вопросы Javascript 6 26.01.2011 14:25
Запереть скрипт внутри блока Vineg Events/DOM/Window 2 25.01.2011 02:16
Как применить css ко всем элементам внутри блока MaxB jQuery 12 28.05.2010 06:56
Перемещение div внутри другого Danila74 jQuery 1 24.09.2009 16:31