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); |
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,
Я вроде уже все показал - и создание нового, и индивидуальное присвоение параметров - в чем прблема? |
Часовой пояс GMT +3, время: 11:52. |