Добрый вечер!
Помогите, пожалуйста, разобраться с перемещением svg-элементов в определенное поле.
Мой код не срабатывает, скорее всего, из-за некорректного обращения к svg-элементу (он почему-то недоступен) в чем причина?
// Это svg-элемент:
pageHTML += ' <div id="groups">';
pageHTML += ' <div id="first">';
pageHTML += ' <svg class="draggable" width="28" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">';
pageHTML += ' <path fill="red" fill-opacity="0.2" stroke="#222222" stroke-width="2" d="M 2 14 L 2 104 a 10 10 0 0 0 20 0 L 22 14 L 2 14 z"></path>';
pageHTML += ' <path fill="red" fill-opacity="0.5" stroke="red" stroke-width="0" d="M 3 64 L 3 104 a 9 9 0 0 0 18 0 L 22 64 L 3 64 z"></path>';
pageHTML += ' </svg>';
pageHTML += ' <h5>text</h5>';
pageHTML += ' </div>';
pageHTML += ' </div>';
// Это поле для вставки svg-элемента:
pageHTML += ' <div id="field">';
pageHTML += ' <div id="Field">';
pageHTML += ' <div id="leftField" ondrop="divDrop(event)" ondragover="divDragOver(event)" ondragenter="divDragEnter(event)" ondragleave="divDragLeave(event)" style="border: solid red 3px"></div>';
pageHTML += ' <div id="rightField"></div>';
pageHTML += ' </div>';
pageHTML += ' </div>';
var leftField = document.getElementById('leftField');
// это события, которые должны сработать для перемещения элемента в определенную область:
function divDragEnter(eo) {
eo=eo||window.event;
eo.preventDefault();
eo.currentTarget.style.borderStyle="dashed";
}
function divDragLeave(eo) {
eo=eo||window.event;
eo.preventDefault();
eo.currentTarget.style.borderStyle="solid";
}
function divDragOver(eo) {
eo=eo||window.event;
eo.preventDefault();
}
function divDrop(eo) {
eo=eo||window.event;
eo.preventDefault();
var elem = document.getElementById('first');
const dragElem=elem.getElementsByClassName('draggable');
eo.currentTarget.appendChild(dragElem);
}
Благодарю за помощь!!!