drag & drop, fast inte

Hejsan.

Jag ska göra ett schema, där man kan boka timmar genom att trycka ner musknappen på en timme, hålla musknappen nere, och flytta musen över efterföljande timmar för att räkna in dessa i bokningen med. Alltså en drag&drop-effekt, fast för att markera.

Jag vet precis hur jag ska göra allting, utom en sak: när jag håller ner musknappen och drar så markeras ju text, bilder o sådant på sidan. Hur får jag browsern att förstå att jag inte vill markera texten på sidan, utan bara göra en drag&drop-effekt?

Tacksam för svar.

/Tomas

Välkommen till wF

Drag'n'drop brukar man med pedagogiska termer avse att dra en objekt från en position och släppa den över en annan :)

Här är ett exempel på hur man kan göra i ditt exempel. Antagligen har du någon liten fin funktion i ASP, php, e.dyl som du kan använda för att loopa fram alla cellerna/raderna.

<script language="JavaScript" type="text/javascript">
var startSelect=false;
function startMark(h){
	for(var i=8;i<=15;i++){
		document.getElementById("klockan"+i).style.backgroundColor="White";
	}
	startSelect=h;
}
function stopMark(h){
	if(startSelect){
		if (document.selection){ document.selection.empty() } else if (window.getSelection){ window.getSelection().removeAllRanges(); }
		for(var i=startSelect;i<h;i++){
			document.getElementById("klockan"+i).style.backgroundColor="blue";
		}
		alert("Du har markerat klockan "+startSelect+" till klockan "+h+".");
	}
}
</script>

<table border="1">
<tr><td id="klockan8" onMouseDown="startMark(8);" onMouseup="stopMark(9);">08:00-09:00</td></tr>
<tr><td id="klockan9" onMouseDown="startMark(9);" onMouseup="stopMark(10);">09:00-10:00</td></tr>
<tr><td id="klockan10" onMouseDown="startMark(10);" onMouseup="stopMark(11);">10:00-11:00</td></tr>
<tr><td id="klockan11" onMouseDown="startMark(11);" onMouseup="stopMark(12);">11:00-12:00</td></tr>
<tr><td id="klockan12" onMouseDown="startMark(12);" onMouseup="stopMark(13);">12:00-13:00</td></tr>
<tr><td id="klockan13" onMouseDown="startMark(13);" onMouseup="stopMark(14);">13:00-14:00</td></tr>
<tr><td id="klockan14" onMouseDown="startMark(14);" onMouseup="stopMark(15);">14:00-15:00</td></tr>
<tr><td id="klockan15" onMouseDown="startMark(15);" onMouseup="stopMark(16);">15:00-16:00</td></tr>
</table>

Ehm, som sagt, det där kunde jag ju gjort själv..

Frågan var hur man gör så att webbläsaren låter bli att "selecta" text och objekt på sidan då man håller ned och drar musen...

Det finns ett IE-specifikt attribut; unselectable="true", och det fungerar bara från IE5.5. Jag störde mig inte av det (man ser ju var man håller på att markera) så jag slängde in en liten funktion som avmarkerar det som är markerat på sidan när man valt klart.

Källa: MSDN

Lägg en "glass pane" ovanför allt innehåll. Om du täcker över sidan med en giganturisk transparent yta som fångar alla klick, så kan du göra vilka underligheter du vill.