Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   js Виджет для сайта (https://javascript.ru/forum/misc/71067-js-vidzhet-dlya-sajjta.html)

bondaryoff 24.10.2017 10:48

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

Dilettante_Pro 24.10.2017 11:23

bondaryoff,
document.body.appendChild(dr_vidg); просто переписывает имеющийся элемент.
<body>
   <div style="border:3px solid black">Контейнер
       <div id = "test" style="border:1px solid red">Тестируемый див</div>
   </div>
</body>
<script>
   var dr_vidg = document.getElementById("test");
   document.body.appendChild(dr_vidg);
</script>

Для создания нового элемента на базе имеющегося используйте
cloneNode

<body>
   <div style="border:3px solid black">Контейнер
       <div id = "test" style="border:1px solid red">Тестируемый див</div>
   </div>
</body>
<script>
   var dr_vidg = document.getElementById("test");
   var new_vidg = dr_vidg.cloneNode(true);
   new_vidg.innerText += " клон";
   new_vidg.id = "clone1";
   document.body.appendChild(new_vidg);
</script>

bondaryoff 28.10.2017 15:35

Можете сделать. Сколько будет стоит

Dilettante_Pro 29.10.2017 09:58

bondaryoff,
Я вроде уже все показал - и создание нового, и индивидуальное присвоение параметров - в чем прблема?


Часовой пояс GMT +3, время: 11:52.