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