Javascript 使图像可拖动的问题

我目前正在创建自己的网站。我需要一些代码，允许用户通过拖动图像来更改它们的位置。我已经在单独的文件中编写了这个HTML、CSS和JS

整个点击拖动的想法是有效的，当我点击图片并拖动到任意一边时，它会移动

当我松开鼠标按钮时，什么也没发生。我尝试了

中断

和

返回

，但它们没有停止该功能。你有什么建议吗

PS：我只是JS的初学者，所以如果你对我的代码有任何其他建议，那就去吧

class-img{
构造函数（id，左侧，顶部）{
this.id=“#”+id；
this.left=parseInt（左，10）；
this.top=parseInt（top，10）；
};
};
$（“.draggable”）。在（“鼠标向下”，函数检测单击（焦点）{
var-stop=false；
var clickPos=[focus.pageX，focus.pageY]；
var selected=newimg（$（this.attr（'id'），$（this.css（“左”），$（this.css（“顶”）；
控制台日志（点击POS，选中）；
$（selected.id）。在（“mousemove”上，函数startMvt（move）{
var newPos=[move.pageX，move.pageY]；
控制台日志（newPos）；
$（selected.id）.css（“top”，selected.top+newPos[1]-点击pos[1]）；
$（selected.id）.css（“left”，selected.left+newPos[0]-点击pos[0]）；
$（selected.id）.on（“mouseup”，函数stop（）{
var stop=true
log（“停止移动！”）；
返回；
});
如果（停止）{
返回false；
};
});
如果（停止）{
返回false；
};
}).延迟（5）
.draggable{
位置：相对位置；
}
#img_1{
排名前10%；
左：20%；
z指数：1；
光标：移动；
}

$（“.draggable”）。在（“鼠标向下”上，

您只在mousedown事件上调用函数，需要相应的事件处理程序。
添加

    .mouseup(function(){
        alert('up');
    });

在结束或延迟时（5）

像

这对我来说很有用！！我也是一个js程序员初学者！所以我不完全理解你的代码，但我认为你必须在我放置
alert（'up'）的地方做点什么
实现单击拖放的一种常见方法是监听元素上的mousedown，然后在触发时，将mousemove和mouseup附加到
文档中。当mouseup触发时，mousemove和mouseup事件被分离。
        $(".draggable").on("mousedown", function detectClick(focus) {
            var stop = false;
            var clickPos = [focus.pageX, focus.pageY];
            var selected = new img($(this).attr('id'), $(this).css("left"), $(this).css("top"));
            console.log(clickPos, selected);
            $(selected.id).on("mousemove", function startMvt(move) {
                var newPos = [move.pageX, move.pageY];
                console.log(newPos);
                $(selected.id).css("top", selected.top + newPos[1] - clickPos[1]);
                $(selected.id).css("left", selected.left + newPos[0] - clickPos[0]);
                $(selected.id).on("mouseup", function stop() {
                var stop = true
                console.log("stopped moving!");
                return;
                });
                if (stop) {
                return false;
                };
            });
        if (stop) {
            return false;
        };
        }).delay(5).mouseup(function(){
            alert('up');
        });