Javascript 使用jQuery平滑地进行拖放

我正在处理拖放代码中的一个问题。代码实际上是有效的，但我想做两件事：

使运动更平稳。我想要的效果与这个插件类似（参见第一个示例）。如果您将下面的代码与此代码进行比较，您可以看到第二个代码有多平滑（特别是如果您将其移动得更快）

修复拖动运动错误。在我的代码中，当您将div移动得更快时，有时div会停止移动，只有当鼠标光标再次进入时才恢复移动。我试图用这段代码来解决这个问题，但它没有像我希望的那样工作

if（mouseXoffset.left+$（'.movable'）.width（））{
$（'.movable'）.css（“左”，mouseX）；
}
if（mouseYoffset.top+$（'.movable'）.height（））{
$（'.movable'）.css（“顶部”，鼠标）；
}

下面是我的代码：

函数endMove（）{
$（this.removeClass（'movable'）；
}
函数startMove（）{
变量偏移量=$（'.movable'）.offset（）；
var mouseX=event.pageX；
var mouseY=event.pageY；
var posX=mouseX-offset.left；
var posY=mouseY-offset.top；
$（'.movable'）。on（'mousemove'，函数（事件）{
var thisX=event.pageX-posX，
thisY=event.pageY-posY；
$（'.movable'）。偏移量({
左：thisX，
上图：thisY
});
if（mouseXoffset.left+$（'.movable'）.width（））{
$（'.movable'）.css（“左”，mouseX）；
}
if（mouseYoffset.top+$（'.movable'）.height（））{
$（'.movable'）.css（“顶部”，鼠标）；
} 
event.preventDefault（）；
});
}
$（文档）.ready（函数（）{
$（“#containerDiv”）.on（'mousedown'，function（）{
$（this.addClass（'movable'）；
startMove（）；
}).on（'mouseup'，function（）{
$（this.removeClass（'movable'）；
endMove（）；
});
});
#containerDiv{
背景：#333；
位置：绝对位置；
宽度：200px；
高度：100px；
光标：移动；
线高：100px；
文本对齐：居中；
颜色：#fff；
边框：#aaa 1px实心；
}
#集装箱{
背景：ef0；
颜色：#444；
边框：#000 1px实心；
}
希望这有帮助


var-draggable=null；
$（文档）.ready（函数（）{
$（'.draggable'）。在({
mousedown:function（）{
console.log（'mousedown'）；
draggable=$（此项）；
$（'html'）.addClass（'cursormove'）；
},
mouseup:function（）{
console.log（'mouseup'）；
draggable=null；
//console.log（'mouseup'）；
$（'html'）.removeClass（'cursormove'）；
}
});
$（文档）.mousemove（函数（e）{
如果（可撤回）{
var TheLeft=e.pageX；
var TheTop=e.pageY；
draggable.css({
“顶部”：顶部，
“左”：左
});
}
});
});
.draggable{
位置：绝对位置；
高度：100px；
宽度：100px；
背景色：#eee；
边框：1px纯黑；
光标：移动；
}
.光标移动：悬停{
光标：移动；
}

拖拽我
是的，这很有效。但我想看看是否可以只使用jQuery，而不使用jQuery UI或其他插件。@Paul没有插件就不会顺利，你能解释为什么吗？我只是好奇。延迟是因为鼠标上下移动。如果你能想出一个不涉及鼠标上下移动的设计来触发，那么拖动将类似于jquery ui插件