Перемещение скролла внутри блока

[DarkDiabolik]

Интересует как это можно реализовать допустим скроллы в св-ах будут скрыты и нужно просмотривать содержимое внутри див блока, зажимая кливишу мышки и как бы перетаскивая содержимое внутренности.
Были идеи по нажатию мышки считать изначальные координаты потом добавлять просто разницу смещения в scrollLeft и scrollTop, однако дальше идеи это так и не ушло, сколько не пробовал всё никак не получалось работоспособного кода, возможно из-за того, что требовалось сначала использовать функции mousedown а в ней mouseover для постоянного плавного перемещения скролла. Искал отдельные плагины наткнулся на CustomerScroll и ScrollTo, но мне кажеться они не могут реализовать, то что мне нужно.

[dmitriymar]

а причём события скрола если у вас не скрол а drag and drop ?

[bes]

<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>

[DarkDiabolik]

Спасибо большое работает, я не сильно разбираюсь в ajax мозгов хватило дописать пару строк для того чтобы вправо влево тоже делал, но не можете показать как это сделать именно на jQuery, мне этот код не очень понятен.

[bes]

Вроде ничего сложного, для вправо-влево добавить x как аналог y, ну и можно добавить пару условий, для того, чтобы на границах не происходило подёргиваний (и не совсем понял причём тут ajax).
Из этого материала должно стать понятно как происходит расчёт.
http://learn.javascript.ru/view-and-position
и можно ещё почитать вот эти рассуждения
Учебник JavaScript и jQuery

[DarkDiabolik]

Спасибо

[bes]

Кстати, заметил одну особенность хрома: при смене курсора по onmousedown прорисовка происходит не сразу, а только после смешения курсора с исходного положения, в FF, IE и Opera сразу.

<div style="background: green; height: 100px"
  onmousedown="this.style.cursor = 'pointer'"
  onmouseup="this.style.cursor = 'default'"
  onselectstart = "return false"
>
</div>

[Deff]

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