Анимация на мышь/касание позиции

Question

Я пытаюсь анимировать div, где я вызвал событие mousedown. Это похоже на полосу прокрутки. Я хочу, чтобы div следовал за мышью, если я постоянно удерживаю кнопку и перемещаю мышь. Как мне это сделать? Событие mousedown, которое у меня есть, просто добавляет значение, где я щелкнул до вершины щелкнутого элемента.

Here's a fiddle

$("#scroll").on("mousedown", function(ev){ 
    var y_pos = ev.pageY; 
    $(this).animate({top: }); 
    console.log(y_pos); 
}) 

Answer 1

Большое предложение Робера M Here переместить DIV с движениями мыши. Я добавил JSFiddle Example -

This Fiddle Example учитывает ваш дизайн. Css нужно было изменить, чтобы функция работала, поэтому, возможно, подумайте о том, чтобы немного изменить свой CSS, а затем динамически получить максимальную верхнюю позицию и максимальное нижнее положение для самых низких и высоких точек Y.

HTML:

<div id="content1">  
    Suggested by <a href="https://stackoverflow.com/users/2242705/robert-m">Robert M</a> 
</div> 

CSS

div { 
    width:200px; 
    height:200px; 
    border:1px solid #000; 
    position:relative; /* make sure the div you want to move is relative*/ 
} 
#content1 { 
    background-color:blue; 
} 

сценарий Роберта

jQuery.fn.dragdrop = function (el) { 
     this.bind('mousedown', function (e) { 
      var relX = e.pageX - $(el).offset().left; 
      var relY = e.pageY - $(el).offset().top; 
      var maxX = $('body').width() - $(el).width() - 10; 
      var maxY = $('body').height() - $(el).height() - 10; 
      $(document).bind('mousemove', function (e) { 
       var diffX = Math.min(maxX, Math.max(0, e.pageX - relX)); 
       var diffY = Math.min(maxY, Math.max(0, e.pageY - relY)); 
       $(el).css('left', diffX + 'px').css('top', diffY + 'px'); 
      }); 
     }); 
     $(window).bind('mouseup', function (e) { 
      $(document).unbind('mousemove'); 
     }); 
     return this; 
    }; 
    $(document).ready(function() { 
     return $('div').dragdrop('div'); 
    }); 

Answer 2

можно попробовать заменить скрипт с этим и посмотреть, если вы получите желаемый результат. Я быстро сделал это, поэтому я не уверен, что это может быть на 100% правильно, но я думаю, что это даст вам представление о том, как это должно быть написано.

$(document).ready(function(){ 

    var initialPositionY = 0; 
    var currentPositionY = 0; 
    var move = false; 

    $("#scroll").on("mousedown", function(ev){ 
     var y_pos = ev.pageY; 
     initialPositionY = ev.pageY; 
     move = true; 
     console.log(move + ' -- ' + initialPositionY + ' -- ' + y_pos); 
    }); 

    $("#scroll").on("mousemove", function(ev){ 
     if(move == true){ 
      var y_pos = ev.pageY; 
      y_pos = ev.pageY - initialPositionY + currentPositionY; 

      if(y_pos > 0) 
       $(this).animate({top: y_pos}, 10); 

      console.log(move + ' -- ' + initialPositionY + ' -- ' + y_pos); 
     } 
    }); 

    $("#scroll").on("mouseup", function(ev){ 
     var y_pos = ev.pageY; 
     currentPositionY += ev.pageY - initialPositionY; 
     move = false; 

     console.log(move + ' -- ' + currentPositionY + ' -- ' + y_pos); 
    }); 
});