Как сделать систему координат?

415

24 ноября 2016, 10:02

Помогите мне сделать систему координат x,y Примерно такую:
только вот в центре у меня будет div (например mover) который можно будет перетаскивать по этой системе, вот пример

а когда центр div'a mover в правом верхнем углу то его координаты должны быть 0,5;0.5 например черный квадрат это граница перетаскивания красного div'a

а если красный div mover будет слева в верхнем углу то координаты соответственно будут -0,5;0.5 например

Как перемещать div я понял с помощью draggable, а вот как сделать такую систему координат не пойму!
Заранее спасибо за помощь!

Answer 1

Перемещение я думаю можно сделать так (код ниже - перемещении по вертикали - по аналогии (свойство TOP)). При движении рассчитывать координаты дива от границ окна и сравнивать с нарисованной координатной сеткой ...

let div = document.body.querySelector('div'); 
 
let flag = false; 
 
function move() { 
  if(flag) { 
    this.style.left = event.pageX - 20 + 'px';     
  }  
} 
 
div.addEventListener('mousemove', move); 
 
div.onmousedown = function(e) {  
  flag = true; 
} 
 
div.onmouseup = function(e) { 
  flag = false; 
}

div { 
  border: 1px solid red; 
  width: 40px; 
  height: 40px; 
  position: absolute; 
}

<div></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Phonegap, JQuery Searchable DropDown Plugin in IOS

Доброе время суток !.

354

jQuery

Шаблон ввода телефона

Использую такую библиотеку jquery. inputmask.

409

jQuery

Очень долго загружается Javascript [закрыто]

Здравствуйте. Хочу попросить совет у вас.

642

jQuery

Как сделать так, чтобы на нажатие реагировал весь блочный элемент?

371