Πως θα μπορούσε να γίνει κάτι τέτοιο (javascript);

rafinos · 6 Μαΐου 2023

Έστω ότι έχω τα τετράγωνα της εικόνας και ότι κάθε ένα είναι div. Όταν γίνεται κλικ σε κάποιο από τα κουτιά τότε αυτό να γίνει ας πούμε κόκκινο. Μέχρι εδώ όλα καλά. Αυτό που θέλω είναι αν μπορεί να γίνει το εξής:
Αν κάνω κλικ στο πρώτο τετράγωνο και σύρω το ποντίκι χωρίς να αφήσω το κλικ στο δίπλα ή στο κάτω τετράγωνο να γίνει και σε αυτό και όσο κουνάω το ποντίκι χωρίς να αφήσω το κλικ να συνεχίσει αυτό να λειτουργεί.

Το παραπάνω παράδειγμα είναι το απλούστερο που μπόρεσα να σκεφτώ για να σας εξηγήσω τι θέλω. Δεν ξέρω πως αλλιώς να το πω.

Επεξ/σία 6 Μαΐου 2023 από rafinos

archangelgre · 6 Μαΐου 2023

3 ώρες πριν, rafinos είπε

Έστω ότι έχω τα τετράγωνα της εικόνας και ότι κάθε ένα είναι div. Όταν γίνεται κλικ σε κάποιο από τα κουτιά τότε αυτό να γίνει ας πούμε κόκκινο. Μέχρι εδώ όλα καλά. Αυτό που θέλω είναι αν μπορεί να γίνει το εξής:
Αν κάνω κλικ στο πρώτο τετράγωνο και σύρω το ποντίκι χωρίς να αφήσω το κλικ στο δίπλα ή στο κάτω τετράγωνο να γίνει και σε αυτό και όσο κουνάω το ποντίκι χωρίς να αφήσω το κλικ να συνεχίσει αυτό να λειτουργεί.

Το παραπάνω παράδειγμα είναι το απλούστερο που μπόρεσα να σκεφτώ για να σας εξηγήσω τι θέλω. Δεν ξέρω πως αλλιώς να το πω.

θα σου ριξω μια πολυ απλη ιδεα ,θα το τσεκαρω αργοτερα .
Θεωρω πως αν βαλεις στο parent container το click event , και μετα στα μεσα κουτακια (child element με καποιο foreach )στο mouseover event .

Πολυ απλοικα το λεω ,θελει λιγο πειραματισμο

papmel · 7 Μαΐου 2023

<!doctype html>
<html>
<head>
<title>test</title>
<style>

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body { 
padding: 0; 
margin:0 auto;
}


.grid-container{
display:flex;
}

.box{
background-color:#ccc;
border:1px solid #111;
height:120px;
width:100%;
}

</style>
</head>

<body>

<div class="grid-container">
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
</div>
<div class="grid-container">
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
</div>


<script>
var isClicked=false;
function enableLight(elem){elem.style.backgroundColor = "green";isClicked=true;console.log(isClicked)}
function disableLight(){isClicked=false;console.log(isClicked)}
function light(elem){if (isClicked) elem.style.backgroundColor = "green";}
</script>
</body>
</html>

rafinos · 7 Μαΐου 2023

4 λεπτά πριν, papmel είπε

<!doctype html>
<html>
<head>
<title>test</title>
<style>

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body { 
padding: 0; 
margin:0 auto;
}


.grid-container{
display:flex;
}

.box{
background-color:#ccc;
border:1px solid #111;
height:120px;
width:100%;
}

</style>
</head>

<body>

<div class="grid-container">
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
</div>
<div class="grid-container">
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
  <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div>
</div>


<script>
var isClicked=false;
function enableLight(elem){elem.style.backgroundColor = "green";isClicked=true;console.log(isClicked)}
function disableLight(){isClicked=false;console.log(isClicked)}
function light(elem){if (isClicked) elem.style.backgroundColor = "green";}
</script>
</body>
</html>

Ωραίος! Κάτι τέτοιο εννοούσα.

Αυτά τα 3 events λειτουργούν με τον ίδιο τρόπο και σε touch οθόνες ή θα πρέπει να παίξω με διαφορετικά events σε αυτή την περίπτωση;

papmel · 7 Μαΐου 2023

5 ώρες πριν, rafinos είπε

Ωραίος! Κάτι τέτοιο εννοούσα.

Αυτά τα 3 events λειτουργούν με τον ίδιο τρόπο και σε touch οθόνες ή θα πρέπει να παίξω με διαφορετικά events σε αυτή την περίπτωση;

σου το εκανα ετσι με αυτα τα events για να παρεις την ιδεα.
αν το θες και σε touch οθόνες εκει πιο καλα να χρησιμοποιησεις jquery η κατι αναλογο και θα παιζει και εκει μια χαρα.

Σύνδεση

Πως θα μπορούσε να γίνει κάτι τέτοιο (javascript);

Προτεινόμενες αναρτήσεις

rafinos

archangelgre

papmel

rafinos

papmel

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση