Jump to content
Sign in to follow this  
pustofkj

Deactivate ondragover

Recommended Posts

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 :-)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by pustofkj

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...