Здравствуйте только начал изучать js
появилась задача создать виджет
http://test.webstroy.info/vidget/
Что не получаеться
1) создание нескольких виджетов на одной странице
2) изменение параметров виджетов независимо друг от друга после инициализации
заранее спасибо за помощь
function widget_card(collor, size, vertical, horizontal) {
window.onload = function() {
var dr_vidg = document.getElementById(id);
var color_circle = document.querySelector('.color_circle');
var color_line = document.querySelector('.color_line');
// console.log(dr_vidg);
console.log(color_circle);
dr_vidg.style.width = size;
dr_vidg.style.height = size;
dr_vidg.style.left = vertical;
dr_vidg.style.top = horizontal;
color_circle.style.fill = color;
color_line.style.fill = color;
console.log(color)
dr_vidg.onmousedown = function(e) {
function getCoords(elem) {
// (1)
var box = elem.getBoundingClientRect();
var body = document.body;
var docEl = document.documentElement;
// (2)
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
// (3)
var clientTop = docEl.clientTop || body.clientTop || 0;
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
// (4)
var top = box.top;
var left = box.left;
return {
top: top,
left: left
};
}
var coords = getCoords(dr_vidg);
var shiftX = e.pageX - coords.left;
var shiftY = e.pageY - coords.top;
document.body.appendChild(dr_vidg);
moveAt(e);
function moveAt(e) {
dr_vidg.style.left = e.pageX - shiftX + 'px';
dr_vidg.style.top = e.pageY - shiftY + 'px';
}
document.onmousemove = function(e) {
moveAt(e);
};
dr_vidg.onmouseup = function() {
document.onmousemove = null;
dr_vidg.onmouseup = null;
};
}
dr_vidg.ondragstart = function() {
return false;
};
};
}
Инициализация на странице
var id = 'dr_vidg1'
var color = 'red';
var size = '200px';
var vertical = '10%';
var horizontal = '10%';
widget_card(color, size, vertical, horizontal, id);
