Как управлять исходным стилем TD в перетаскивании JavaScript? - PullRequest
0 голосов
/ 15 октября 2018

В цикле перетаскивания вы можете управлять всеми видами стилей «перетаскиваемого элемента» и в ondrop, но возможно ли также управлять стилем источника?

В моем случае я перетаскиваюэлемент ancher от одного TD к другому TD.В функции drop (событие) я могу стилизовать целевой TD так, как я хочу.См. Код ниже.

// The actual drop event
function drop(event) {
    // Prevent the default action for a drop (activate link)
    event.preventDefault();
    // Get the ID from the dragged item
    var iRecordID = event.dataTransfer.getData("text");
    // Get the ID from the dropzone
    var sXeduledata = event.target.id;            
    // Put the dragged element in the dropzone
    event.target.appendChild(document.getElementById(iRecordID));
    // Change the dropzone styling
    event.target.style.backgroundColor = "lightgreen";
    event.target.style.border = ""; 
    event.target.style.textAlign = "center";        
    // Connect to a php file and saving the new data
    $.post('dnd-update.php', 
    {sXeduleData:sXeduledata,iRecordNumber:iRecordID});        
} 

Но мне нужно стилизовать и подготовить «исходный» TD для повторного использования в качестве «dropzone».Чтобы быть более точным, зеленый источник должен стать белой целью.Как мне это сделать?

Исходный код PHP:

protected function showXeduleItemContent($p_aXeduleItem){
   echo("<td class='text-center h5 back_green' class='droptarget' ondrop='drop(event)' ondragover='allowDrop(event)' id='".$sDay.":".$iRE.":".$aClassroomRecord[0]."'>");
   echo("<a href='foo.php' draggable='true' id='".$p_aXeduleItem[0]."'>".$aLessonName[0][2]."</a></td>");
}

1 Ответ

0 голосов
/ 16 октября 2018

Благодаря Milken32.Он поставил меня на правильный путь.После еще нескольких размышлений о "parentNode" я нашел нужный мне ответ.

https://www.w3schools.com/jsref/prop_node_parentnode.asp

Ответ заключается в добавлении 'event.target.parentNode.style' к событию 'dragstart'.

document.addEventListener("dragstart", function(event) {
    // The event.dataTransfer.setData() method saves the data type for later use in the script
    event.dataTransfer.setData("text", event.target.id);    
    // Styling of the source better know as parent
    event.target.parentNode.style.backgroundColor = "white";        
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...