How to trigger modal when div element is dragged to specific location?

Question

I am making aa boardgame website for a schoolproject. I have a div element(image) that can be dragged. The goal is to reach to the finish line. So my main problem is that how can I trigger a modal when the image is dragged to the finish point? Here below is my code that i have written to drag the element across the canvas.

    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
        });
    });


})

Answer 1

开始在这里与碰撞检测，并编写启动模式检测发生后的功能。