перетаскивание не работает в первый раз, но во второй раз да - PullRequest
0 голосов
/ 18 марта 2020

Моя проблема в том, что у меня есть изображение, которое я могу перетаскивать путем клонирования. Расположение этих изображений было автоматически сохранено в базе данных sqlite, откуда я могу прочитать их положение. Но когда я хочу снова переместить элемент, первая функция не вызывает соответствующие функции. (dragElement, elementDrag, et c.) Он был создан по следующей ссылке: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable. Но во второй раз их называют, они работают должным образом. Что может вызвать такую ​​проблему?

Код html:

image

Где я читаю сохраненные изображения:

bulbs=payload.value;//JSON.parse(payload.value);
for(var i=0;i<bulbs.length;++i){
    icon=document.createElement('img');
    icon.src="lightbulb.jpg";
    icon.height="24";
    icon.width="17";
    icon.draggable=true;
    icon.ondragstart=dragStart;
    iconStyle = document.createElement('style');
    iconStyle.type = 'text/css';
    icon.posX = bulbs[i].pos_x;
    icon.posY = bulbs[i].pos_y;
    iconStyle.innerHTML='.cssClass'+(MapContainer.childElementCount+1).toString()+'{ position: absolute; left: '+bulbs[i].pos_x+'px; top: '+bulbs[i].pos_y+'px; }';
    console.log(iconStyle.innerHTML);
    document.getElementsByTagName('head')[0].appendChild(iconStyle);
    icon.className='cssClass'+(MapContainer.childElementCount+1).toString();
    icon.id='icon'+(MapContainer.childElementCount+1);
    MapContainer.appendChild(icon);
}

Это функция, которая не вызывается первым:

function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
    document.onmouseup = closeDragElement;
 }
...