フロントエンドの開発中に、ドラッグアンドドロップの効果が使用される場所がたくさんあります。もちろん、http：//jqueryui.com/draggable/は良い選択ですが、私はキャセロールを破って真実を尋ねる人です。 JSで同様のプラグインを実装するのに時間がかかったので、あまり言いません。
最初：HTMLおよびCSS
コードコピーは次のとおりです。
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style>
* {
マージン：0;
パディング：0;
}
＃div1 {
位置：絶対;
幅：100px;
高さ：100px;
カーソル：移動;
背景色：赤;
}
</style>
</head>
<body>
<div id = "div1">
</div>
</body>
</html>
次に、最初にメインアルゴリズムを実装します。
コードコピーは次のとおりです。
<スクリプト>
window.onload = function（）{
//ドラッグする必要があるdivを取得します
var div1 = document.getElementById（ "div1"）;
//マウスプレスイベントを追加します
div1.onmousedown = function（evt）{
var oevent = evt ||イベント;
//マウスを押すことから左上に左上に距離を取得します
var distancex = oevent.clientx -div1.offsetLeft;
var Distancey = oevent.clientx -div1.offsettop;
//ドキュメントのスライド時間を追加します
document.onmousemove = function（evt）{
var oevent = evt ||イベント;
// divの左上値を再計算します
var left = oevent.clientx -distancex;
var top = oevent.clienty- distangy;
//ゼロ以下の場合は左に左に、divがドキュメントからドラッグアウトするのを防ぐためにゼロに設定します
if（左<= 0）{
左= 0;
}
//残された場合、ドキュメントの正しい境界を超えて、右の境界に設定します
else if（left> = document.documentelement.clientwidth -div1.offsetwidth）{
左= document.documentlement.clientWidth -div1.offsetwidth;
}
if（top <= 0）{
TOP = 0;
}
else if（top> = document.documentelement.clientheight -div1.offseTheight）{
top = document.documentelement.clientheight -div1.offsetheight;
}
// divをもう一度割り当てます
div1.style.top = top + "px";
div1.style.left = left + "px";
}
//マウスリフトイベントを追加します
div1.onmouseup = function（）{
//イベントをクリアします
document.onmousemove = null;
div1.onmouseup = null;
}
}
}
</script>
ええ、オブジェクト指向の実装を使用します
コードコピーは次のとおりです。
<style>
* {
マージン：0;
パディング：0;
}
＃div1 {
幅：100px;
高さ：100px;
背景色：赤;
}
＃div2 {
背景色：黄色。
幅：100px;
高さ：100px;
}
</style>
<div id = "div1"> </div>
<div id = "div2"> </div>
JS Draggleクラス：
コードコピーは次のとおりです。
関数drag（id）{
this.div = document.getElementById（id）;
if（this.div）{
this.div.style.cursor = "move";
this.div.style.position = "absolute";
}
this.disx = 0;
this.disy = 0;
var _this = this;
this.div.onmousedown = function（evt）{
_this.getDistance（evt）;
document.onmousemove = function（evt）{
_this.setposition（evt）;
}
_this.div.onmouseup = function（）{
_this.clearevent（）;
}
}
}
drag.prototype.getDistance = function（evt）{
var oevent = evt ||イベント;
this.disx = oevent.clientx -this.div.offsetLeft;
this.disy = oevent.clienty -this.div.offsettop;
}
drag.prototype.setposition = function（evt）{
var oevent = evt ||イベント;
var l = oevent.clientx -this.disx;
var t = oevent.clienty -this.disy;
if（l <= 0）{
l = 0;
}
else if（l> = document.documentelement.clientwidth -this.div.offsetwidth）{
l = document.documentelement.clientWidth -this.div.offsetwidth;
}
if（t <= 0）{
t = 0;
}
else if（t> = document.documentelement.clientheight -this.div.offseTheight）{
t = document.documentelement.clientheight -this.div.offsetheight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
}
drag.prototype.clearevent = function（）{
this.div.onmouseup = null;
document.onmousemove = null;
}
最後に：最終実装：
コードコピーは次のとおりです。
window.onload = function（）{
新しいドラッグ（ "div1"）;
新しいドラッグ（ "div2"）;
}
効果は次のとおりです。
上記はこの記事に関するすべてです。誰もがJavaScriptをより熟練させることが役立つことを願っています。