Deactivate ondragover

[pustofkj]

Hi all, I don't know if this topic should be part of JavaScript or HTML forum, but I think here it is ok - I'm sorry if it's not. I'm developing a school work - chess game for two players. It has to be RIA and we should use HTML5 platform or Silverlight. I decided for HTML5 and I'd like to use HTML5 drag&drop.Well, when somebody clicks e.g. on white pawn on B2, the application should now make field B3 droppable and after drop the dropability should be prevented.So I'm learning HTML5 drag&drop. This is my code:

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) {  if (ev.target.id == 'B2_piece') {	var targetField = document.getElementById('B3_field'); 	/**** here I'm making field B3 droppable - it's working ****/	targetField.ondragover = function(ev) { allowDrop(ev); };	targetField.className = targetField.className + ' allowed';  }   ev.dataTransfer.setData('Text', ev.target.id);} function drop(ev) {  ev.preventDefault();  ev.target.appendChild(document.getElementById(ev.dataTransfer.getData('Text')));  ev.target.className = ev.target.className.replace(' allowed', '');   /**** here I'd like to prevent dropability on every field - in this case only field B3 ****/  var xpathResult = document.evaluate('//div[@ondragover]', document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);   var current = xpathResult.iterateNext();  while (current) {	current.ondragover = function(ev) { return true; }	current = xpathResult.iterateNext();  }}

But the prevention is not working. Don't you know the reason? Thank you very much :-)

[justsomeguy]

Should the ondragover function return false if dropping isn't allowed there?

[pustofkj]

Thanks for your response :-).No, I think not. When I set:

current.ondragover = function(ev) { return false; }

everything is droppable now. The default browser behaviour is sending events and when you want to prevent this behaviour, you have to call preventDefault() on event. And when you want to restore the default, usually returning true is good enough. But not in this case and I don't know why. So, I can make div droppable, but never switch it off :-(Another idea?

[justsomeguy]

Try to delete the ondragover handler entirely or set it to null.

[pustofkj]

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.

Edited December 18, 2012 by pustofkj

[justsomeguy]

It looks like by default the browser will not allow the element to be dropped. You need to prevent the default action in order to allow that. So all you need to do is check inside the allowdrop function whether the dragging object is allowed to be dropped. If it is not, don't prevent the default action. Only prevent the default action if you want to allow the drop. So you don't need to mess around with adding and removing event handlers, just have the event handler validate the drop and either prevent the default action, or not.

[pustofkj]

Hello, it looks sensibly, I tried it different ways, but it's still not working, could you give me an simple example please? Thank you very much.

[davej]

Yeah, I would like to understand this. I was looking at some example code and the drag prevention didn't work. In fact I posted that question here somewhere... http://w3schools.invisionzone.com/index.php?showtopic=46045

[justsomeguy]

function allowDrop(ev){  var allowed = true;   // do your validation on whether it is ok to drop, and if not then set allowed to false   if (allowed)    ev.preventDefault(); }

How you want to do the validation is up to you. It would start with the drag function, where when you start dragging a piece then you'll set the various values that you need to check during validation. For example, the ID of the element being dragged or the text or source of an image or whatever you want to use to identify the piece they are dragging. In the allowDrop function you check those values to figure out which element is being dragged, check the element that it is over to figure out if it is valid to drop it there, and set the allowed variable appropriately.