[bondaryoff]

Здравствуйте только начал изучать 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);