Yeah, I tried both:
current.ondragover = null;
current.removeAttribute('ondragover'));
and even with jQuery
$('#' + current.getAttribute('id')).attr('ondragover', '').unbind('dragover');
but anything doesn't work :-(, the field is still droppable. I even tried create new element with necessary data (id, class, innerHTML) and replaceChild, and I don't know why but it doesn't work neither.Here is my current code:
function drop(ev) { ev.preventDefault(); ev.target.appendChild(document.getElementById(ev.dataTransfer.getData('Text'))); // find every droppable field var replace = new Array(); var xpathResult = document.evaluate('//div[@class="field"]', document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); var replaceIter = 0; var current = xpathResult.iterateNext(); while (current) { if (current.ondragover) { replace[replaceIter] = current; replaceIter++; } current = xpathResult.iterateNext(); } // replace fields with new ones for (var i = 0; i < replaceIter; i++) { current = document.getElementById(replace[i].getAttribute('id')); var newField = document.createElement('div'); newField.setAttribute('id', current.getAttribute('id')); newField.setAttribute('class', current.getAttribute('class')); newField.ondrop = function(ev) { drop(ev); } // newField.innerHTML = replace[i].innerHTML; newField.innerHTML = 'A'; current.parentNode.replaceChild(current, replace[i]); }}
When this code didn't work, I tried to appendChild and it works, so my last idea is, that I could remove current field and new field insert after one before current. But I'm afraid that this change will be visible for human eye.