login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Javascript drag en drop, tekst select (Opgelost)

Offline Douwedecoder - 21/08/2008 19:46 (laatste wijziging 21/08/2008 19:47)
Avatar van DouwedecoderNieuw lid Hallo iedereen.

De laatste tijd ben ik wat aan het experimenteren met Drag 'n drop functionaliteit in Javascript, ik ondervind echter een probleem waar ik na zeer extensief zoeken nog altijd geen (afdoende) antwoord op heb weten te vinden:

Bij drag en drop bewegingen, dwz MouseDown -> MouseMove -> Mouseup, selecteerd de browser automatisch alle onderliggende tekst. Dit ziet er niet alleen bijzonder slecht uit maar kan er bij meerdere drag en drop bewegingen ook voor zorgen dat willekeurige (geselecteerde) tekst in textarea's e.d. terechtkomen.

Ik weet reeds dat het mogelijk is om met deze regels het selecteren van text op de pagina volledig uit te zetten:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.onmousedown = function() {
  2. 		return false;
  3. 	}
  4. 	document.onselectstart = function() {
  5. 		return false;
  6. 	}


Dit werkt zowel in IE als in FF.

Het probleem hiermee is echter dat de gebruiker nu totaal geen tekst op de pagina meer kan selecteren. (uitgezonderd met ctrl-a). Dit is bepaald niet gebruiksvriendelijk en zeker voor paginas met invoervelden e.d. erg lastig.

Hoe kan ik nu mijn code zo aanpassen dat er niet geselecteerd wordt tijden het drag en drop event, maar wel daarbuiten?

De code die ik gebruik om een div "drag-a-ble" te maken heb ik op plaatscode gezet: http://www.plaatscode.be/17690

Een werkend voorbeeld staat op http://www.uberknobs.com/test

Alvast bedankt voor jullie aandacht,

Douwe

4 antwoorden

Gesponsorde links
Offline Roland - 22/08/2008 09:34
Avatar van Roland PHP expert Kijk eens op http://www.deva...otype.html en dan de laatste snippet (Element.noSelect)

Hiermee kun je het selecteren mee uitschakelen voor n specifiek element en tis makkelijk om te tunen naar plain javascript mocht je geen prototype gebruiken.
Offline Douwedecoder - 22/08/2008 23:17
Avatar van Douwedecoder Nieuw lid Nice Shorty,

Ik heb er dit van weten te maken:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function selectStop(el) {
  2. 	if(el.onselectstart) {
  3. 		el.onselectstart = function(){
  4. 			return false;
  5. 		}
  6. 	} else if(el.style) {
  7. 		if(el.style.MozUserSelect) {
  8. 			el.style.MozUserSelect = 'none';
  9. 		}
  10. 	} else el.onmousedown = function(){
  11. 		return false;
  12. 	}
  13. }
  14.  
  15. function selectStart(el) {
  16. 	if(el.onselectstart) {
  17. 		el.onselectstart = function(){
  18. 			//niets blijkbaar
  19. 		}
  20. 	} else if(el.style) {
  21. 		if(el.style.MozUserSelect) {
  22. 			el.style.MozUserSelect = "";
  23. 		}
  24. 	} else el.onmousedown = function(){
  25. 		//niets blijkbaar
  26. 	}
  27. }


Dit werkt in FF, maar helaas nog niet in IE (what else is new...). Gelukkig levert googelen op die MozUserSelect property (kende ik nog niet) ook nogal wat op en ik ben iig weer een stukje dichterbij.

We puzzelen vrolijk verder  
Offline JBke - 23/08/2008 08:56
Avatar van JBke PHP gevorderde indien je intresse hebt in kant en klare drag & drop:

http://plugins....ategory/45
Offline Douwedecoder - 23/08/2008 17:38 (laatste wijziging 23/08/2008 19:17)
Avatar van Douwedecoder Nieuw lid Solved! Bedankt mensen 

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function selectStop() {
  2. 	document.onmousedown = function() {
  3. 		return false;
  4. 	}
  5. 	document.onselectstart = function() {
  6. 		return false;
  7. 	}
  8. 	document.onmousemove = function() {
  9. 		return false;
  10. 	}
  11. }
  12.  
  13. function selectStart() {
  14. 	document.onmousedown = function() {
  15. 		//nothing
  16. 	}
  17. 	document.onselectstart = function() {
  18. 		//nothing
  19. 	}
  20. 	document.onmousemove = function() {
  21. 		//nothing
  22. 	}
  23. }


Werkt zeker in IE 7 en FF 2, andere browsers moet ik nog testen.

Notes:

-Het onmousemove event blijkt nodig in IE voor selectie, FF heeft het niet nodig

-De functies met alleen een comment blijken ook nodig.

-In FF zal reeds geselecteerde text geselecteerd blijven, in IE niet.

-Jullie links hebben me op het goede spoor gezet, veel dank daarvoor.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.172s