Сделать перетаскивание плавно с помощью jQuery

Question

Я имею дело с проблемой в моем коде перетаскивания. Код действительно работает, но я хотел бы сделать две вещи:

1. Сделайте движение более плавным. Эффект, который я ищу, похож на этот плагин http://draggabilly.desandro.com/ (см. Первый пример). Если вы сравниваете мой код ниже и этот, вы можете видеть, насколько гладким является второй (особенно, если вы перемещаете его быстрее).

2. Исправить ошибку перетаскивания. В моем коде, когда вы перемещаете div быстрее, иногда остановка div останавливается и только возобновляет движение, когда курсор мыши снова входит. Я попытался разрешить его с помощью этого кода, но он не работает, как хотелось бы.

if (mouseX < offset.left && mouseX > offset.left + $('.movable').width()){ 
    $('.movable').css("left", mouseX); 
} 
if (mouseY < offset.top && mouseY > offset.top + $('.movable').height()){ 
    $('.movable').css("top", mouseY); 
} 

А вот скрипку с моим кодом:

function endMove() { 
 
    $(this).removeClass('movable'); 
 
} 
 
function startMove() { 
 
var offset = $('.movable').offset(); 
 
var mouseX = event.pageX; 
 
var mouseY = event.pageY; 
 
var posX = mouseX - offset.left; 
 
var posY = mouseY - offset.top; 
 
    
 
    
 
    $('.movable').on('mousemove', function(event) { 
 
     var thisX = event.pageX - posX, 
 
      thisY = event.pageY - posY; 
 

 
     $('.movable').offset({ 
 
      left: thisX, 
 
      top: thisY 
 
     }); 
 
     
 
     if(mouseX < offset.left && mouseX > offset.left + $('.movable').width()){ 
 
      $('.movable').css("left", mouseX); 
 
     } 
 
     
 
if(mouseY < offset.top && mouseY > offset.top + $('.movable').height()){ 
 
      $('.movable').css("top", mouseY); 
 
     } 
 
     
 
     event.preventDefault(); 
 
     
 
    }); 
 
} 
 
$(document).ready(function() { 
 
    $("#containerDiv").on('mousedown', function() { 
 
     $(this).addClass('movable'); 
 
     startMove(); 
 
    }).on('mouseup', function() { 
 
     $(this).removeClass('movable'); 
 
     endMove(); 
 
    }); 
 

 
});

#containerDiv { 
 
    background:#333; 
 
    position:absolute; 
 
    width:200px; 
 
    height:100px; 
 
    cursor:move ; 
 
    line-height:100px; 
 
    text-align:center; 
 
    color:#fff; 
 
    border:#aaa 1px solid; 
 
} 
 
#containerDiv.movable { 
 
    background:#ef0; 
 
    color:#444; 
 
    border:#000 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="containerDiv"></div>

Я хотел бы сделать это две вещи, используя только JQuery (без пользовательского интерфейса, никаких плагинов) , Является ли это возможным?. Заранее спасибо.

Answer 1

Надеюсь, что это помогает

var TheDraggable = null; 
 

 
$(document).ready(function() { 
 

 
    $('.draggable').on({ 
 

 
    mousedown: function() { 
 
     console.log('mousedown'); 
 
     TheDraggable = $(this); 
 
     $('html').addClass('cursormove'); 
 
    }, 
 

 
    mouseup: function() { 
 
     console.log('mouseup'); 
 
     TheDraggable = null; 
 
     //console.log('mouseup'); 
 
     $('html').removeClass('cursormove'); 
 
    } 
 
    }); 
 

 
    $(document).mousemove(function(e) { 
 

 
    if (TheDraggable) { 
 

 
     var TheLeft = e.pageX; 
 
     var TheTop = e.pageY; 
 

 
     TheDraggable.css({ 
 
     'top': TheTop, 
 
     'left': TheLeft 
 
     }); 
 
    } 
 
    }); 
 
});

.draggable { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: #eee; 
 
    border: 1px solid black; 
 
    cursor: move; 
 
} 
 

 
.cursormove:hover { 
 
    cursor: move; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="draggable">Drag me</div>