Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2017, 11:48
Новичок на форуме
Отправить личное сообщение для bondaryoff Посмотреть профиль Найти все сообщения от bondaryoff
 
Регистрация: 24.10.2017
Сообщений: 2

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);
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2017, 12:23
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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>

Последний раз редактировалось Dilettante_Pro, 24.10.2017 в 12:31.
Ответить с цитированием
  #3 (permalink)  
Старый 28.10.2017, 16:35
Новичок на форуме
Отправить личное сообщение для bondaryoff Посмотреть профиль Найти все сообщения от bondaryoff
 
Регистрация: 24.10.2017
Сообщений: 2

Можете сделать. Сколько будет стоит
Ответить с цитированием
  #4 (permalink)  
Старый 29.10.2017, 09:58
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как писать, дебажить JS для FireFox bookmarklet DeeZ Оффтопик 2 01.10.2017 21:37
Выравнивание блоков для сайта js garfild304 Элементы интерфейса 1 15.01.2017 02:12
CMS или Framework для сайта xShift Серверные языки и технологии 3 13.01.2017 18:20
Шаблоны для интеграции AnyChart JS Charts (визуализация данных) в самые разные стэки andreykh Серверные языки и технологии 0 30.12.2016 13:56
Посоветуйте как улучшить код для работы с history api [ jquery + js + history api ] Geo Ваши сайты и скрипты 0 11.01.2014 23:41