Witam moje pytanie może być trochę dziwne ale jak połączyć OnMouseOver i OnClick?
Tak aby uzyskać efekt po złapaniu elementu wykonaj... i wykonuj do momentu jego upuszczenia.
Pełna wersja: [JavaScript]OnMouseOver + OnClick
W zdarzeniu onmousedown dopisujesz nowe zdarzenie onmosuemove, które kasujesz przy zdarzeniu onmouseup: np.
Bo rozumiem, że chodzi coś na kształt skryptu drag&drop, jak nie to robisz to samo tylko bez window
Kod
<div id="test" style="border: 1px solid black;">1234567890</div>
<script>
document.getElementById('test').onmousedown = function(){
var that = this;
window.onmousemove = function(){ that.innerHTML = Math.random(); };
window.onmouseup = function(){ this.onmousemove=null; };
}
</script>
<script>
document.getElementById('test').onmousedown = function(){
var that = this;
window.onmousemove = function(){ that.innerHTML = Math.random(); };
window.onmouseup = function(){ this.onmousemove=null; };
}
</script>
Bo rozumiem, że chodzi coś na kształt skryptu drag&drop, jak nie to robisz to samo tylko bez window
onDrag nie jest przypadkiem czymś co np. IE i inne starsze(ale bez przesady) przeglądarki nie obsługuje?
być-może...
w każdym bądź razie można to zrealizaować nastepująco:
onMouseDown:
ustawiamy flage np. clicked na true
onMouseUp:
ustawiamy flate clicked na false
i jak np chcesz cos przeciagac lub cos podobnego w trakcie poruszania myszką podczas gdy wcisniety jest klawisz mmyszki to:
onMouseMove:
if(clicked) rob_cos()
w każdym bądź razie można to zrealizaować nastepująco:
onMouseDown:
ustawiamy flage np. clicked na true
onMouseUp:
ustawiamy flate clicked na false
i jak np chcesz cos przeciagac lub cos podobnego w trakcie poruszania myszką podczas gdy wcisniety jest klawisz mmyszki to:
onMouseMove:
if(clicked) rob_cos()
Dzięki wielkie za pomoc tego potrzebowałem
A jeszcze takie pytanko...
Na chrome czy FF działa super ale na IE8 nie chce załapać jakieś sugestie?
tego potrzebowałem A jeszcze takie pytanko...
Na chrome czy FF działa super ale na IE8 nie chce załapać jakieś sugestie?
Pokaż kod HTML + JS.
A więc mam taki kodzik który ma służyć do przesuwania tych 3 div-ów klikamy na dowolny div przytrzymujemy i przeciągamy... Wszystko pięknie działa tylko nie w IE8...
Kod
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>cos</title>
<script language="JavaScript1.2">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
return true
}
var tempDivX = 0
var tempDivY = 0
function przesun(id) {
window.onmousemove = function(){
tempDivY = document.getElementById(id).offsetTop
tempDivX = document.getElementById(id).offsetLeft
document.Show.DivY.value = tempDivY
document.Show.DivX.value = tempDivX
document.Show.DivId.value = id
document.getElementById(id).style.top=tempY;
document.getElementById(id).style.left=tempX;
};
window.onmouseup = function(){ this.onmousemove=null; };
}
</script>
</head>
<body>
<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br />
<input type="text" name="MouseY" value="0" size="4"> Y<br />
<br />
<input type="text" name="DivX" value="0" size="4"> X Div<br />
<input type="text" name="DivY" value="0" size="4"> Y Div<br />
<input type="text" name="DivId" value="0" size="4"> Id Div<br />
</form>
<div id=1 style='position: absolute; left: 200px; top:100px; width: 100px; height: 25px; cursor: pointer; background-color: silver;' onmousedown=przesun('1');></div>
<div id=2 style='position: absolute; left: 200px; top:200px; width: 100px; height: 25px; cursor: pointer; background-color: purple;' onmousedown=przesun('2');></div>
<div id=3 style='position: absolute; left: 200px; top:300px; width: 100px; height: 25px; cursor: pointer; background-color: black;' onmousedown=przesun('3');></div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>cos</title>
<script language="JavaScript1.2">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
return true
}
var tempDivX = 0
var tempDivY = 0
function przesun(id) {
window.onmousemove = function(){
tempDivY = document.getElementById(id).offsetTop
tempDivX = document.getElementById(id).offsetLeft
document.Show.DivY.value = tempDivY
document.Show.DivX.value = tempDivX
document.Show.DivId.value = id
document.getElementById(id).style.top=tempY;
document.getElementById(id).style.left=tempX;
};
window.onmouseup = function(){ this.onmousemove=null; };
}
</script>
</head>
<body>
<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br />
<input type="text" name="MouseY" value="0" size="4"> Y<br />
<br />
<input type="text" name="DivX" value="0" size="4"> X Div<br />
<input type="text" name="DivY" value="0" size="4"> Y Div<br />
<input type="text" name="DivId" value="0" size="4"> Id Div<br />
</form>
<div id=1 style='position: absolute; left: 200px; top:100px; width: 100px; height: 25px; cursor: pointer; background-color: silver;' onmousedown=przesun('1');></div>
<div id=2 style='position: absolute; left: 200px; top:200px; width: 100px; height: 25px; cursor: pointer; background-color: purple;' onmousedown=przesun('2');></div>
<div id=3 style='position: absolute; left: 200px; top:300px; width: 100px; height: 25px; cursor: pointer; background-color: black;' onmousedown=przesun('3');></div>
</body>
</html>
jak nie działa w IE to prowizorycznym sposobem jest dodanie metatagu w sekcji HEAD wymuszającej tryb zgodności z 7
http://weblogs.asp.net/fredriknormen/archi...-meta-tags.aspx
http://weblogs.asp.net/fredriknormen/archi...-meta-tags.aspx
Mała poprawka do konstytucji w ogóle nie działa na IE...
Cytat(cerberpat @ 2.12.2010, 14:31:51 ) 
Mała poprawka do konstytucji w ogóle nie działa na IE...
na szybko wkleiłem na laptopie u dziewczyny i napisze jedno - pod IE widocznie nie ma czegoś takiego jak window.onmousemove ;p - na dokumencie już alert działa - podepnij to pod body czy pokombinuj - a kod testuje się małymi kroczkami... jak mniej więcej rozwiązanie znasz to nie będę za Ciebie rozwiązywał tylko napisałem gdzie to nie ma prawa działać...a i jeszcze Ci podpowiem, że jak raz zrobisz document.cos=funkcja i potem drugi raz to samo to skasujesz to pierwsze - funkcje musisz albo inaczej pod zdarzenia podpinać albo zrobić sobie stos funkcji w np. tablicy i to wywoływać w jednej funkcji pod zdarzeniem...
Po małych bólach ale kodzik co do przesuwania diva (onDrag) wygląda tak działa już również na IE Dziękuje wszystkim za pomoc
działa już również na IE Dziękuje wszystkim za pomoc Kod
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cos</title>
<script type="text/javascript">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
var tempDivX = 0
var tempDivY = 0
var sprawdz = false
var name = null
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
if (sprawdz == true)
{
tempDivY = document.getElementById(name).offsetTop
tempDivX = document.getElementById(name).offsetLeft
document.Show.DivY.value = tempDivY
document.Show.DivX.value = tempDivX
document.Show.DivId.value = name
document.getElementById(name).style.top=tempY+'px';
document.getElementById(name).style.left=tempX+'px';
}
return true
}
function mousedown(id)
{
sprawdz = true
name = id
}
function mouseup()
{
sprawdz = false
}
</script>
</head>
<body>
<form name="Show" action='#' method='post'>
<p>
<input type=text name=MouseX value=0 size=4> X
</p>
<p>
<input type=text name=MouseY value=0 size=4> Y
</p>
<p>
<input type=text name=DivX value=0 size=4> X Div
</p>
<p>
<input type=text name=DivY value=0 size=4> Y Div
</p>
<p>
<input type=text name=DivId value=0 size=4> Id Div
</p>
</form>
<div id='id1' style='position: absolute; left: 200px; top:100px; width: 100px; height: 25px; cursor: move; background-color: silver;' onmousedown=mousedown("id1"); onmouseup=mouseup();></div>
<div id='id2' style='position: absolute; left: 200px; top:200px; width: 100px; height: 25px; cursor: move; background-color: purple;' onmousedown=mousedown("id2"); onmouseup=mouseup();></div>
<div id='id3' style='position: absolute; left: 200px; top:300px; width: 100px; height: 25px; cursor: move; background-color: black;' onmousedown=mousedown("id3"); onmouseup=mouseup();></div>
</body>
</html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cos</title>
<script type="text/javascript">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
var tempDivX = 0
var tempDivY = 0
var sprawdz = false
var name = null
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
if (sprawdz == true)
{
tempDivY = document.getElementById(name).offsetTop
tempDivX = document.getElementById(name).offsetLeft
document.Show.DivY.value = tempDivY
document.Show.DivX.value = tempDivX
document.Show.DivId.value = name
document.getElementById(name).style.top=tempY+'px';
document.getElementById(name).style.left=tempX+'px';
}
return true
}
function mousedown(id)
{
sprawdz = true
name = id
}
function mouseup()
{
sprawdz = false
}
</script>
</head>
<body>
<form name="Show" action='#' method='post'>
<p>
<input type=text name=MouseX value=0 size=4> X
</p>
<p>
<input type=text name=MouseY value=0 size=4> Y
</p>
<p>
<input type=text name=DivX value=0 size=4> X Div
</p>
<p>
<input type=text name=DivY value=0 size=4> Y Div
</p>
<p>
<input type=text name=DivId value=0 size=4> Id Div
</p>
</form>
<div id='id1' style='position: absolute; left: 200px; top:100px; width: 100px; height: 25px; cursor: move; background-color: silver;' onmousedown=mousedown("id1"); onmouseup=mouseup();></div>
<div id='id2' style='position: absolute; left: 200px; top:200px; width: 100px; height: 25px; cursor: move; background-color: purple;' onmousedown=mousedown("id2"); onmouseup=mouseup();></div>
<div id='id3' style='position: absolute; left: 200px; top:300px; width: 100px; height: 25px; cursor: move; background-color: black;' onmousedown=mousedown("id3"); onmouseup=mouseup();></div>
</body>
</html>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.