Html5 Javascript Canvas Drag And Drop
Tags: javascript, canvas, webdev, html
Published: 2022-02-08 14:51:16

> Смотреть снизу вверх

[jsfiddle.net](https://jsfiddle.net/Spsoi/5say6d43/17/)
Финал

```javascript
let ctx = null;
let elementClick = null;
let x_before;
let y_before;
let elements = [ // элементы для отрисовки
    {
        name: '1',
        color: 'blue',
        width: 100,
        height: 100,
        top: 20,
        left: 15
    },
    {
        name: '2',
        color: 'red',
        width: 100,
        height: 100,
        top: 50,
        left: 125
    },
    {
        name: '3',
        color: 'yellow',
        width: 100,
        height: 100,
        top: 150,
        left: 185
    },
    {
        name: '4',
        color: 'green',
        width: 100,
        height: 100,
        top: 300,
        left: 235
    },
];



function releaseMouseButton () { // отпускаем мышку
    // 5
    elementClick = null;
}

function moveRect (event) { // постоянно отрисовываем
    // 4
    if (elementClick == null) {return}
    let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
    x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
    y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
    desplX = x_click - x_before;
    desplY = y_click - y_before;
    elementClick.left =  elementClick.left + desplX;
    elementClick.top = elementClick.top + desplY;
    x_before = x_click;
    y_before = y_click;
    window.requestAnimationFrame(draw);
}

function clickByRect (event) { // отслеживаем клик по элементу
    // 3
    let x_click;
    let y_click;
    let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
    x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
    y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
    x_before = x_click;
    y_before = y_click;
    console.log(x_click);
    console.log(y_click);
    elementClick = null;

    elements.forEach ( function (element) {

        x_final = element.left + element.width; // правый край элемента по x
        y_final = element.top + element.height; // низ края элемента по y

        if ( (x_click > element.left) && (x_click < x_final) && 
            (y_click > element.top) && (y_click < y_final) ) 
        {
            elementClick = element;
        }
        
    });
}

function draw () {
    // 2
    canvas = document.getElementById('tutorial');
        let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
        let width = infoPos.width; // получаем ширину элемента
        let height = infoPos.height; // получаем ширину высоту
        ctx.clearRect(0, 0, width, height); // стираем прошлый кадр
        elements.forEach (function(element){ // отрисовка элемента
            ctx.fillStyle = element.color;
            ctx.fillRect(element.left, element.top, element.width, element.height);
        });
}

function initialization() { // точка входа
    // 1
    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
    canvas.addEventListener('mousedown', clickByRect);
    canvas.addEventListener('mousemove', moveRect);
    canvas.addEventListener('mouseup', releaseMouseButton);
    if (canvas.getContext) { // проверка
        ctx = canvas.getContext('2d');
        draw();
    }
}

initialization();
```

[jsfiddle.net](https://jsfiddle.net/Spsoi/5say6d43/13/)

Добавим функцию для отслеживания кликов по элементам.

```javascript
function clickByRect (event) { // отслеживаем клик по элементу
    let x_click;
    let y_click;
    let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
    x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
    y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
    console.log(x_click);
    console.log(y_click);
    let elementClick = null;

    elements.forEach ( function (element) {

        x_final = element.left + element.width; // правый край элемента по x
        y_final = element.top + element.height; // низ края элемента по y

        if ( (x_click > element.left) && (x_click < x_final) && 
            (y_click > element.top) && (y_click < y_final) ) 
        {
            elementClick = element;
        }
        
        if (elementClick != null) {
            alert(x_click + ' ' + y_click);
        }
    });
}
function initialization() { // точка входа
    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
    canvas.addEventListener('click', clickByRect); // Вешаем событие и врубаем функцию
    if (canvas.getContext) { // проверка
        ctx = canvas.getContext('2d');
        draw();
    }
}
```
[jsfiddle.net](https://jsfiddle.net/Spsoi/5say6d43/9/)
Отрисуем четыре элемента

```javascript
let ctx = null;
let elements = [ // элементы для отрисовки
    {
        name: '1',
        color: 'blue',
        width: 100,
        height: 100,
        top: 20,
        left: 15
    },
    {
        name: '2',
        color: 'red',
        width: 100,
        height: 100,
        top: 50,
        left: 125
    },
    {
        name: '3',
        color: 'yellow',
        width: 100,
        height: 100,
        top: 150,
        left: 185
    },
    {
        name: '4',
        color: 'green',
        width: 100,
        height: 100,
        top: 300,
        left: 235
    },
];


function initialization() { // точка входа
    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
    if (canvas.getContext) { // проверка
        ctx = canvas.getContext('2d');
        draw();
    }

}

function draw () {
    canvas = document.getElementById('tutorial');
        elements.forEach (function(element){ // отрисовка элемента
            ctx.fillStyle = element.color;
            ctx.fillRect(element.left, element.top, element.width, element.height);
        });
}
initialization();
```

[jsfiddle.net](https://jsfiddle.net/Spsoi/5say6d43/2/)

```javascript
function initialization() { // точка входа

    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас

    canvas.addEventListener('click', function (event){ // вешаем эвент на всё окно канваса
        let infoPos = canvas.getBoundingClientRect();
        console.log(infoPos.left);
        console.log(event.clientX); //левый край окна браузера
        console.log(infoPos.top);
        console.log(event.clientY); //верхний край окна браузера
        let xpos = event.clientX - infoPos.left;
        console.log(xpos); // координаты пикселя x в окне canvas, на который нажали
        let ypos = event.clientY - infoPos.top;
        console.log(ypos); // координаты пикселя y в окне canvas, на который нажали
    });
}
initialization();
```

```css
canvas{
    border: 1px solid black;
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id ="tutorial" width="200" height="200"></canvas>
    <script src="canvas.js"></script>
</body>
</html>
```