0

Есть функция для создания прямоугольника

Разметка

  <button id="button2">6789</button>
  <canvas id="canvas" width="500" height="500">

Код

  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  function rect(x, y, width, height) {

    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    this.draw = function() {
      context.fillRect(this.x, this.y, this.width, this.height);
    };

  }

  var rectc = [];

  function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
  }

  $('#button2').click(function(){

      var width = randomFromTo(10, 60);
      var height = randomFromTo(10, 60);
      var x = randomFromTo(0, canvas.width);
      var y = randomFromTo(0, canvas.height);

      var myRect = new rect(x, y, width, height).draw();



      rectc.push(myRect);

   })

как реализовать drag and drop для этого прямоугольника?

1
  • разметка <button id="button2">6789</button> <canvas id="canvas" width="500" height="500"> Commented 26 мар. 2017 в 10:34

1 ответ 1

0

1) Заносим координаты прямоугольника в объект. Для каждого прямоугольника - свой объект. Или своя ячейка в массиве. Также в объекте должен быть идентификатор - юзается ли драгдроп в данный момент или нет (назовем его isdrop)
2) Получаем клик мыши по объекту.
3) В объекте при клике мыши если isdrop = true, то сетим isdrop = false. И наоборот
4) onmousemove && isdrop => rect.x = mouse.x;

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.