Javascript 当div元素被拖动到特定位置时，如何触发modal？

我正在为一个学校项目制作一个棋盘游戏网站。我有一个可以拖动的div元素（image）。目标是到达终点线。所以我的主要问题是，当图像被拖到终点时，如何触发一个模态？下面是我编写的代码，用于在画布上拖动元素

    var canvas = new fabric.Canvas('c', { selection: false });
    var grid = 35;

    // create grid

    for (var i = 0; i < (3000 / grid); i++) {
        canvas.add(new fabric.Line([ i * grid, 0, i * grid, 3000], { stroke: '#ccc', selectable: false }));
        canvas.add(new fabric.Line([ 0, i * grid, 3000, i * grid], { stroke: '#ccc', selectable: false }))
    }

    const url = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_geel.png';
    const url1 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_blauw.png';
    const url2 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_lichtblauw.png';
    const url3 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_lichtgroen.png';
    const url4 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_paars.png';
    const url5 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_rood.png';
    const url6 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_roze.png';

    fabric.Image.fromURL(url, (img) => {
//scale down the image but keeping the aspect ratio
        const width = 100;
        const height = 80;
        const widthFactor = width / img.width;
        const heightFactor = height/ img.height;
        const minFactor = Math.min(widthFactor, heightFactor);
        img.scale(minFactor);
        canvas.add(img)
    }, {
//here you can set the positioning
        left: 1790,
        top: 40,
    });
    fabric.Image.fromURL(url1, (img) => {
//scale down the image but keeping the aspect ratio
        const width = 100;
        const height = 80;
        const widthFactor = width / img.width;
        const heightFactor = height/ img.height;
        const minFactor = Math.min(widthFactor, heightFactor);
        img.scale(minFactor);
        canvas.add(img)
    }, {
//here you can set the positioning
        left: 1790,
        top: 100,
    });
    fabric.Image.fromURL(url2, (img) => {
//scale down the image but keeping the aspect ratio
        const width = 100;
        const height = 80;
        const widthFactor = width / img.width;
        const heightFactor = height/ img.height;
        const minFactor = Math.min(widthFactor, heightFactor);
        img.scale(minFactor);
        canvas.add(img)
    }, {
//here you can set the positioning
        left: 1790,
        top: 150,
    });
    fabric.Image.fromURL(url3, (img) => {
//scale down the image but keeping the aspect ratio
        const width = 100;
        const height = 80;
        const widthFactor = width / img.width;
        const heightFactor = height/ img.height;
        const minFactor = Math.min(widthFactor, heightFactor);
        img.scale(minFactor);
        canvas.add(img)
    }, {
//here you can set the positioning
        left: 1790,
        top: 200,
    });
    fabric.Image.fromURL(url4, (img) => {
//scale down the image but keeping the aspect ratio
        const width = 100;
        const height = 80;
        const widthFactor = width / img.width;
        const heightFactor = height/ img.height;
        const minFactor = Math.min(widthFactor, heightFactor);
        img.scale(minFactor);
        canvas.add(img)
    }, {
//here you can set the positioning
        left: 1790,
        top: 250,
    });
    fabric.Image.fromURL(url5, (img) => {
//scale down the image but keeping the aspect ratio
        const width = 100;
        const height = 80;
        const widthFactor = width / img.width;
        const heightFactor = height/ img.height;
        const minFactor = Math.min(widthFactor, heightFactor);
        img.scale(minFactor);
        canvas.add(img)
    }, {
//here you can set the positioning
        left: 1790,
        top: 300,
    });
    fabric.Image.fromURL(url6, (img) => {
//scale down the image but keeping the aspect ratio
        const width = 100;
        const height = 80;
        const widthFactor = width / img.width;
        const heightFactor = height/ img.height;
        const minFactor = Math.min(widthFactor, heightFactor);
        img.scale(minFactor);
        canvas.add(img)
    }, {
//here you can set the positioning
        left: 1790,
        top: 350,
    });
    canvas.on('object:moving', function(options) {
        options.target.set({
            left: Math.round(options.target.left / grid) * grid,
            top: Math.round(options.target.top / grid) * grid
        });
    });


})

var canvas=newfabric.canvas（'c'，{selection:false}）；
var网格=35；
//创建网格
对于（变量i=0；i<（3000/网格）；i++）{
add（newfabric.Line（[i*grid，0，i*grid，3000]，{stroke:'#ccc'，可选：false}））；
添加（新的fabric.Line（[0，i*grid，3000，i*grid]，{stroke:'#ccc'，可选：false}））
}
常量url=https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_geel.png'；
常量url1=https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_blauw.png'；
常量url2=https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_lichtblaw.png'；
常量url3=https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_lichtgroen.png'；
常量url4=https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_paars.png'；
常量url5=https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_rood.png'；
常量url6=https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_roze.png'；
fabric.Image.fromURL（url，（img）=>{
//缩小图像比例，但保持纵横比
常数宽度=100；
常数高度=80；
常数宽度系数=宽度/img.width；
常数高度系数=高度/惯性高度；
const minFactor=Math.min（宽度因子、高度因子）；
img.量表（minFactor）；
canvas.add（img）
}, {
//在这里您可以设置定位
左：1790，
前40名，
});
fabric.Image.fromURL（url1，（img）=>{
//缩小图像比例，但保持纵横比
常数宽度=100；
常数高度=80；
常数宽度系数=宽度/img.width；
常数高度系数=高度/惯性高度；
const minFactor=Math.min（宽度因子、高度因子）；
img.量表（minFactor）；
canvas.add（img）
}, {
//在这里您可以设置定位
左：1790，
前100名，
});
fabric.Image.fromURL（url2，（img）=>{
//缩小图像比例，但保持纵横比
常数宽度=100；
常数高度=80；
常数宽度系数=宽度/img.width；
常数高度系数=高度/惯性高度；
const minFactor=Math.min（宽度因子、高度因子）；
img.量表（minFactor）；
canvas.add（img）
}, {
//在这里您可以设置定位
左：1790，
排名：150，
});
fabric.Image.fromURL（url3，（img）=>{
//缩小图像比例，但保持纵横比
常数宽度=100；
常数高度=80；
常数宽度系数=宽度/img.width；
常数高度系数=高度/惯性高度；
const minFactor=Math.min（宽度因子、高度因子）；
img.量表（minFactor）；
canvas.add（img）
}, {
//在这里您可以设置定位
左：1790，
前200名，
});
fabric.Image.fromURL（url4，（img）=>{
//缩小图像比例，但保持纵横比
常数宽度=100；
常数高度=80；
常数宽度系数=宽度/img.width；
常数高度系数=高度/惯性高度；
const minFactor=Math.min（宽度因子、高度因子）；
img.量表（minFactor）；
canvas.add（img）
}, {
//在这里您可以设置定位
左：1790，
排名：250，
});
fabric.Image.fromURL（url5，（img）=>{
//缩小图像比例，但保持纵横比
常数宽度=100；
常数高度=80；
常数宽度系数=宽度/img.width；
常数高度系数=高度/惯性高度；
const minFactor=Math.min（宽度因子、高度因子）；
img.量表（minFactor）；
canvas.add（img）
}, {
//在这里您可以设置定位
左：1790，
排名：300，
});
fabric.Image.fromURL（url6，（img）=>{
//缩小图像比例，但保持纵横比
常数宽度=100；
常数高度=80；
常数宽度系数=宽度/img.width；
常数高度系数=高度/惯性高度；
const minFactor=Math.min（宽度因子、高度因子）；
img.量表（minFactor）；
canvas.add（img）
}, {
//在这里您可以设置定位
左：1790，
top:350，
});
canvas.on（'object:moving'，函数（选项）{
options.target.set({
左：Math.round（options.target.left/grid）*grid，
顶部：Math.round（options.target.top/grid）*grid
});
});
})

从碰撞检测开始，编写一个函数，在检测发生后启动模态。

感谢您提供的信息，但我不知道如何在我的oww代码中实现这一点。你能给我指一下正确的方向吗？