DragDrop με JavaScript

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

DragDrop με JavaScript

Δημοσίευση από skeftomilos » 08 Αύγ 2005 02:18

Πρόσφατα χρειάστηκε να προσθέσω drag-drop δυνατότητες σε μία σελίδα. Συγκεκριμένα εμφανιζόταν μέσα στη σελίδα ένα ψευδοπαράθυρο, δηλαδή μία απομίμηση παραθύρου των Windows.

Εικόνα

Όμως για να λειτουργήσει ικανοποιητικά η ψευδαίσθηση έπρεπε να μπορεί ο χρήστης να μετακινεί το παράθυρο πιάνοντάς το από την μπάρα του τίτλου. Φανταζόμουν ότι θα ήταν κάτι απλό, αλλά τελικά δεν ήταν καθόλου. Πρέπει να ομολογήσω εξαρχής ότι δε με ενδιέφεραν έτοιμες λύσεις με τη μορφή δωρεάν βιβλιοθηκών JavaScript. Γνωρίζω την ύπαρξη μερικών όπως η script.aculo.us και η Rico που δεν είναι καθόλου άσχημες. Δε θα είχα καμιά αντίρρηση να τις χρησιμοποιήσω αν δε ζύγιζαν καμιά 40αριά KB ή κάθε μία. Βέβαια διαθέτουν άφθονη λειτουργικότητα και κάνουν ένα σωρό ωραία πράματα, όμως για ένα απλό draggable layer νομίζω ότι είναι overkill. Αυτό το άρθρο λοιπόν περιγράφει πώς γίνεται το drag-drop στη JavaScript με απλό κώδικα. Ελπίζω κάποιοι να το βρείτε χρήσιμο.

Οι browsers διαθέτουν ορισμένα events που έχουν σχέση με το dragging. Π.χ. ο Firefox το onmousedrag και ο IE τα ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart και ondrop. Δεν τα έψαξα καθόλου καθώς διάβασα ότι είναι buggy και ασύμβατα από browser σε browser. Θέλουμε προφανώς κάτι standard που να τρέχει σε όλους τους browsers, χωρίς browser detection. Αν πρέπει να γράφουμε διαφορετικό κώδικα για κάθε browser, ζήτω που καήκαμε ως JavaScripters. :) Άρα θα αρκεστούμε στα onmousedown, onmousemove και onmouseup. Όλοι οι browsers διαθέτουν αυτά τα συμβάντα, αν και δε λειτουργούν σε όλους με τον ίδιο τρόπο. Έστω για παράδειγμα ότι έχουμε δύο div το ένα μέσα στο άλλο και παγιδεύσουμε όλα τα συμβάντα για αυτά αλλά και για το document. Αν κάνουμε κλικ στο εσωτερικό div θα πυροδοτηθούν τα συμβάντα όλων των στοιχείων με σειρά εσωτερικό -> εξωτερικό -> document. Δηλαδή:
εσω-down -> εξω-down -> doc-down -> εσω-up -> εξω-up -> doc-up -> εσω-click -> εξω-click -> doc-click
Αν κάνουμε διπλό κλικ στον IE ή το Firefox θα έχουμε αυτή τη σειρά:
down -> up -> click -> down -> up -> click -> dblclick
Ενώ στον Opera μία αρκετά διαφορετική σειρά:
down -> up -> click -> dblclick -> click -> up
Τα συμβάντα onclick και ondblclick δε θα τα χρειαστούμε, τα παγίδευσα μόνο ως απόδειξη για την ασυμβατότητα των browsers. Αυτό όμως που πραγματικά θα μας ενοχλήσει είναι οι διαφορές στη συμπεριφορά του onmousemove. Είναι το πιο σημαντικό event για μας γιατί σε αυτό θα αλλάζουμε τη θέση του layer ώστε να δημιουργήσουμε την ψευδαίσθηση της κίνησης. Η ορθή συμπεριφορά θα ήταν η συνεχής πυροδότηση του συμβάντος για ένα στοιχείο που βρίσκεται σε φάση dragging, ακόμα και αν προς στιγμή ο δείκτης του mouse πέσει εκτός του στοιχείου. Ο Firefox δουλεύει σωστά, όχι όμως και οι IE και Opera. Πρέπει να πούμε ότι παρόλο που θα μετακινούμε συνεχώς το στοιχείο ώστε να είναι κάτω από το ποντίκι, μία βίαιη μετακίνηση του ποντικιού μπορεί στιγμιαία να φέρει το δείκτη εκτός του στοιχείου, και θα είναι καταστροφική αν αυτό σταματήσει την ροή των συμβάντων.

Η προφανής ροή των συμβάντων είναι η εξής. Το dragging ξεκινά με το onmousedown. Στη συνέχεια συμβαίνουν πολλά onmousemove, στα οποία αλλάζουμε τη θέση του στοιχείου. Τέλος συμβαίνει το onmouseup που τερματίζει το dragging. Τα συμβάντα που θα χρειαστεί να παγιδεύσουμε είναι τα εξής:

- element.onmousedown
- document.onmousemove
- document.onmouseup


Βλέπετε ότι από τα συμβάντα του στοιχείου παγιδεύουμε μόνο το onmousedown. Για τα onmousemove και onmouseup βασιζόμαστε στά αξιόπιστα συμβάντα του document. Προτού συνεχίσουμε ας δούμε το παράδειγμα που θα αναλύσουμε στη συνέχεια. Στην οθόνη φαίνεται έτσι:

Εικόνα

... και αυτός είναι ο κώδικας:

Κώδικας: Επιλογή όλων

<html>
  <head>
    <title>DragDrop-Simple</title>
    <style type="text/css">
      #box &#123;
        position&#58; absolute;
        left&#58; 100px;
        top&#58; 80px;
        width&#58; 240px;
        height&#58; 100px;
        background-color&#58; #ffbf00;
        border&#58; 1px solid #7f5f00;
        cursor&#58; move;
        text-align&#58; center;
        line-height&#58; 100px;
      &#125;
    </style>
    <script type="text/javascript">
      var dragged
      var offsetX
      var offsetY

      window.onload = function&#40;&#41; &#123;
        document.getElementById&#40;"box"&#41;.onmousedown = function&#40;e&#41; &#123;
          e = e || window.event
          if &#40;e.button == 2&#41; return
          dragged = this
          offsetX = e.screenX - this.offsetLeft
          offsetY = e.screenY - this.offsetTop
          return false
        &#125;

        document.onmousemove = function&#40;e&#41; &#123;
          if &#40;!dragged&#41; return
          e = e || window.event
          dragged.style.left = &#40;e.screenX - offsetX&#41; + "px"
          dragged.style.top = &#40;e.screenY - offsetY&#41; + "px"
          return false
        &#125;

        document.onmouseup = function&#40;e&#41; &#123;
          if &#40;!dragged&#41; return
          dragged = null
        &#125;
      &#125;
    </script>
  </head>
  <body>
    <h2>DragDrop-Simple</h2>
    <div id="box">Drag this box!</div>
    <p style="color&#58;#bfbfbf">
      junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk <br><br>
      junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk <br><br>
      junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk junk <br><br>
    </p>
  </body>
</html>
Κατ' αρχήν βλέπουμε ότι το div που θα σέρνουμε με το mouse είναι τοποθετημένο απόλυτα στη σελίδα:

Κώδικας: Επιλογή όλων

<style>
  #box &#123;
    position&#58; absolute;
Αυτό φαντάζομαι το είχατε μαντέψει. :) Προφανώς δε μπορούμε να μετακινήσουμε στατικά στοιχεία της σελίδας. Οι υπόλοιποι CSS κανόνες είναι διακοσμητικοί και δεν επηρεάζουν τη λειτουργία του script. Στον JavaScript κώδικα ξεκινάμε δηλώνοντας τρεις global μεταβλητές. Η μεταβλητή dragged θα περιέχει κατά τη φάση dragging το μετακινούμενο element, ενώ θα είναι null την υπόλοιπη ώρα. Όσο για τις offsetX και offsetY, αυτές θα περιέχουν μία αριθμητική διαφορά που θα χρειαστούμε κατά τη μετακίνηση του στοιχείου. Στη συνέχεια παγιδεύουμε τα τρία συμβάντα που μας ενδιαφέρουν. Για την ακρίβεια παγιδεύουμε και ένα τέταρτο, το window.onload. Αυτό σημαίνει ότι η παγίδευση των συμβάντων θα πρέπει να περιμένει τη ολοκλήρωση της φόρτωσης της σελίδας. Δε μπορούμε να παγιδεύσουμε άμεσα τα συμβάντα γιατί σε αυτή τη φάση η σελίδα δεν έχει κατεβεί ακόμα ολόκληρη, και επομένως η εντολή ...

Κώδικας: Επιλογή όλων

document.getElementById&#40;"box"&#41;.onmousedown = ...
... θα προκαλέσει σφάλμα. Βλέπετε δεν έχει κατέβει ακόμα το στοιχείο "box", άρα η JavaScript δε μπορεί να καταλάβει σε τι αναφερόμαστε! Επομένως η παγίδευση των συμβάντων θα συμβεί μέσα στο block των εντολών...

Κώδικας: Επιλογή όλων

window.onload = function&#40;&#41; &#123;
  ...
&#125;
Ας δούμε τώρα τι κώδικας υπάρχει για το συμβάν onmousedown του στοιχείου:

Κώδικας: Επιλογή όλων

document.getElementById&#40;"box"&#41;.onmousedown = function&#40;e&#41; &#123;
  e = e || window.event
  if &#40;e.button == 2&#41; return
  dragged = this
  offsetX = e.screenX - this.offsetLeft
  offsetY = e.screenY - this.offsetTop
  return false
&#125;
Σε αυτές τις λίγες γραμμές συμβαίνουν ουκ ολίγα πράγματα. Κατ' αρχήν ερχόμαστε αντιμέτωποι με μία ασυμβατότητα του IE με τον υπόλοιπο κόσμο. Όταν συμβαίνει ένα event, μπορούμε να πάρουμε περισσότερες πληροφορίες σχετικά με αυτό από το argument e της ρουτίνας που το χειρίζεται. Αυτό το argument περιέχει ένα αντικείμενο με πλήθος χρήσιμων ιδιοτήτων όπως τη θέση του mouse, το πατημένο κουμπί του mouse ή του keyboard και πολλά άλλα. Όμως ο IE προτιμά να μας παρέχει αυτό το αντικείμενο από την ιδιότητα window.event και όχι ως argument. Για να μπορέσουμε να ξεπεράσουμε αυτή την ασυμβατότητα βάζουμε την παρακάτω γραμμή σε όλα τα events:

Κώδικας: Επιλογή όλων

e = e || window.event
Καταλαβαίνετε τι κάνει; Αν το e είναι undefined αποδίδει στο e το αντικείμενο window.event. Υπάρχουν και άλλοι τρόποι να γράψουμε αυτή την εντολή, όπως...

Κώδικας: Επιλογή όλων

if &#40;e == null&#41; e = window.event
if &#40;!e&#41; e = window.event
e = e ? e &#58; window.event
...μεταξύ άλλων. :) Με λίγα λόγια υπάρχουν πολλοί δρόμοι που οδηγούν στη Ρώμη, οπότε προτιμάμε τον πιο σύντομο. Επειδή ο κώδικας JavaScript μεταφέρεται και εκτελείται στον client φροντίζουμε να είναι όσο γίνεται πιο λακωνικός, αρκεί βέβαια να παραμένει κατανοητός. Στη συνέχεια του κώδικα εξετάζουμε την τιμή της ιδιότητας e.button.

Κώδικας: Επιλογή όλων

if &#40;e.button == 2&#41; return
Αν πατήθηκε το δεξί κουμπί δε χρειάζεται να κάνουμε τίποτα. Έπειτα αποδίδουμε τιμές στις τρεις global μεταβλητές, dragged, offsetX και offsetY.

Κώδικας: Επιλογή όλων

dragged = this
offsetX = e.screenX - this.offsetLeft
offsetY = e.screenY - this.offsetTop
Το keyword this περιέχει εδώ το στοιχείο "box", οπότε το αποδίδουμε στην dragged. Για τον υπολογισμό των αριθμητικών διαφορών χρησιμοποιούμε τις ιδιότητες screenX και screenY του event. Αυτές επιστρέφουν τη θέση του mouse σε αριθμό pixel από την άνω-αριστερή γωνία όλης της οθόνης. Το event έχει και άλλες παρόμοιες ιδιότητες (x, pageX, layerX, clientX, offsetX) αλλά η screenX είναι η μόνη αξιόπιστη και ταυτόχρονα συμβατή με όλους τους browsers. Όσον αφορά τις ιδιότητες offsetLeft και offsetTop του στοιχείου, αυτές αντιστοιχούν στις τιμές left και top του style. Δε μπορούμε να διαβάσουμε κατ' ευθείαν τις ιδιότητες this.style.left και this.style.top γιατί θα δούμε ότι είναι κενές. Αυτό συμβαίνει γιατί οι CSS ιδιότητες του στοιχείου δεν το συνοδεύουν στο attribute style="" αλλά στο χωριστό τμήμα <style> sto head. Στο τέλος βγαίνουμε από τη ρουτίνα επιστρέφοντας false.

Κώδικας: Επιλογή όλων

return false
Αυτό το τελευταίο είναι πολύ σημαντικό. Αν δεν το κάνουμε, όταν θα σέρνουμε το στοιχείο θα συμβαίνει ταυτόχρονη επιλογή κειμένου από κάτω, κάτι που δε θέλουμε προφανώς. Θα χρειαστεί να κάνουμε το ίδιο και στο χειριστή συμβάντος document.onmousemove, με τον οποίο θα ασχοληθούμε τώρα αμέσως. Ή μάλλον καλύτερα να το αναβάλλουμε για λίγο. Ας ετοιμάσουμε ένα καφεδάκι και ας επιστρέψουμε σε πέντε λεπτά.

:pint:

Γύρισα. Ελπίζω να μη βαρεθήκατε να περιμένετε, αλλά ένα φραπεδάκι είναι ότι πρέπει με τέτοια ζέστη! Λοιπόν, είχαμε τελειώσει με τη δύσκολη onmousedown του στοιχείου "box" και θα συνεχίζαμε με την εύκολη document.onmousemove:

Κώδικας: Επιλογή όλων

document.onmousemove = function&#40;e&#41; &#123;
  if &#40;!dragged&#41; return
  e = e || window.event
  dragged.style.left = &#40;e.screenX - offsetX&#41; + "px"
  dragged.style.top = &#40;e.screenY - offsetY&#41; + "px"
  return false
&#125;
Στη ρουτίνα αυτή σκοπεύουμε να μετακινήσουμε το στοιχείο ανάλογα με τη θέση του mouse. Αν δεν είμαστε σε φάση dragging προφανώς δε χρειάζεται να γίνει τίποτα. Μην ξεχνάμε ότι το συμβάν αυτό θα τρέχει ακόμα και όταν δεν είναι πατημένο το mouse, οπουδήποτε κι αν είναι ο δείκτης του mouse πάνω στη σελίδα. Άρα πρέπει να εκτελούμε όσο λιγότερο κώδικα γίνεται. Οι γραμμές που μας ενδιαφέρουν είναι η απόδοση τιμής στις ιδιότητες style.left και style.top του στοιχείου μας, η οποία προκαλεί και τη μετακίνησή του. Θα χρησιμοποιήσουμε τη θέση του mouse στη οθόνη (screenX, screenY) σε συνδυασμό με τις αριθμητικές διαφορές που είχαμε υπολογίσει νωρίτερα. Για να είμαι ειλικρινής δεν έσπασα το κεφάλι μου κάνοντας μαθηματικά. Κατέληξα στις σωστές μαθηματικές σχέσεις με τη μέθοδο της δοκιμής και του λάθους - συνήθως δουλεύει! ;)

Κώδικας: Επιλογή όλων

document.onmouseup = function&#40;e&#41; &#123;
  if &#40;!dragged&#41; return
  dragged = null
&#125;
Ο χειριστής συμβάντος του document.onmouseup είναι απλούστατος, και κατανοητός χωρίς άλλα σχόλια.

Τώρα που τελειώσαμε νομίζω ότι θα θέλετε να το δοκιμάσετε και στην πράξη: live-example.

Δε μπορώ να εγγυηθώ ότι ο κώδικας είναι τέλειος, μπορώ όμως να εγγυηθώ με βεβαιότητα ότι δεν είναι! :D Θα δείτε ένα πρόβλημα όταν το παράθυρο του browser δεν καλύπτει όλη την οθόνη και προσπαθήσετε να τραβήξετε το box εκτός του browser. Τότε χάνεται το συμβάν document.onmouseup με αποτέλεσμα όταν επιστρέψουμε στον browser να έχουμε drag χωρίς drop. Απ' ότι είδα οι έτοιμες βιβλιοθήκες έχουν παρόμοια προβλήματα αν και σε μικρότερο βαθμό (κυρίως με τον Opera). Μάλλον χρειάζεται browser detection για να λυθεί το πρόβλημα, οπότε προτιμώ να το αφήσω άλυτο. :P

Ένα άλλο ζήτημα είναι η δυνατότητα που έχει ο χρήστης να τραβήξει το box εκτός σελίδας. Αυτό συμβαίνει και πάλι όταν δεν είναι maximized ο browser. Αν αυτό είναι πρόβλημα (μάλλον είναι) θα πρέπει να προσθέσουμε λίγο περιοριστικό κώδικα στο document.onmousemove.

Μια τελευταία παρατήρηση είναι ότι παγιδεύοντας τα συμβάντα του document ο κώδικάς μας μπορεί να έρθει σε σύγκρουση με κάποιο άλλο script που ενδεχομένως προσπαθήσει να κάνει το ίδιο. Για το σκοπό αυτό σε έναν ιδανικό κόσμο θα έπρεπε να παγιδεύουμε τα συμβάντα με addEventListener, ώστε να μην ακυρώσουμε τον χειριστή συμβάντος ενός άλλου script. Δε ζούμε όμως στον ιδανικό κόσμο (ακόμα!) και υπάρχουν διάφορα προβλήματα και ασυμβατότητες με αυτή τη μέθοδο, αφήστε που μπορεί το άλλο script να ιδιοποιείται με αγένεια το συμβάν έτσι κι αλλιώς. Πάντως τα προβλήματα αυτά σχετίζονται συνήθως με το window.onload, το οποίο είναι και η πέτρα του σκανδάλου για τις περισσότερες τέτοιες διενέξεις (workaround εδώ).

Επιστρέφοντας για να λύσω το αρχικό μου πρόβλημα με το ψευδοπαράθυρο, είδα ότι τα πράγματα είναι λίγο πιο περίπλοκα. Συγκεκριμένα είναι διαφορετικό το στοιχείο που σύρεται από αυτό που κινείται. Επιπλέον υπάρχει και μια μικρή περιοχή (η κόκκινη) που δεν πρέπει να ενεργοποιεί το dragging. Για να απλοποιήσω την κατάσταση κατέληξα τελικά να φτιάξω μία μικροσκοπική βιβλιοθήκη, την DragManager. Δεν έχει documentation αλλά όποιος ενδιαφέρεται θα βρει εύκολα την άκρη κοιτώντας το παράδειγμα που τη συνοδεύει. Είναι ελεγμένη σε IE6, IE5, Firefox 1.0 και Opera 8.0, καθώς και ότι δεν προκαλεί memory leaks.
Τελευταία επεξεργασία από το μέλος skeftomilos την 10 Αύγ 2005 07:51, έχει επεξεργασθεί 2 φορές συνολικά.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

DragDrop με JavaScript

Δημοσίευση από cordis » 08 Αύγ 2005 11:18

Ακόμα ένα απίστευτο βοήθημα! :o
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

DragDrop με JavaScript

Δημοσίευση από Cmg__ » 10 Αύγ 2005 02:53

Πραγματικα απίστευτο!
Μας έχει καλομάθει ο Mr Skeftomilos :P .

Όντως υπάρχει αυτό το bugάκι που λες!

Έχω όμως μία απορία που προσπάθησα μα δεν μπορεσα να την καταλάβω 100% .
Τι σημαίνει ακριβώς "παγιδέυω ένα συμβάν"?? :oops: :question: :question:

Δηλαδή το να συμβαίνει μόνο στα πλαίσια κάποιου ...... :hammer:
Τέλος πάντων καλύτερα έξήγησέ το εσύ γιατί θα βγάλω κανα μάτι! :( :wink: :) :oops: :violi: :brushteeth:

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

DragDrop με JavaScript

Δημοσίευση από cordis » 10 Αύγ 2005 12:19

Μετέφερα την απάντηση εδώ γιατί είναι από μόνη της ένα νέο βοήθημα.. :P
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

mat_
Δημοσιεύσεις: 121
Εγγραφή: 09 Απρ 2004 02:01

DragDrop με JavaScript

Δημοσίευση από mat_ » 06 Οκτ 2005 19:08

Υπάρχει τρόπος πατώντας ένα κουμπί να κλείνει το "ψευδοπαράθυρο"?

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

DragDrop με JavaScript

Δημοσίευση από emphasy » 06 Οκτ 2005 19:42

Polu wraio Tut, ontws me exei kaloma8ei, gia thn akriveia kakoma8ei :P, o skeftomilos! :)

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

DragDrop με JavaScript

Δημοσίευση από dimsis » 06 Οκτ 2005 22:53

Άξιος...
πριν κανένα χρόνο είχαμε "ενσωματώσει" κάποιες drag js libraries στο content management της εταιρείας μας και ειδού το αποτέλεσμα: (μόνο αυτό το site αφήσαμε με ενεργοποιημένο το drag & drop online)
http://kpn.alexpolis.gr/
Μόλις φορτώσει απλώς κρατήστε πατημένο το αριστερό κουμπί του mouse πάνω σε κάποιο block (π.χ. στον τίτλο Ενημέρωση) και μετακινήστε το ποντίκι σας....
Δοκιμάστε και ένα διπλό κλικ, επίσης στον τίτλο ενός block ;)

Γενικώς έχει πλάκα, αλλά αν δεν βάλεις και cookies ή άλλο τρόπο να σου κρατάει τα blocks στις θέσεις που τα είχε πάει ο χρήστης ώστε να τα εμφανίζει εκεί μετά από κάθε refresh, και αν δεν λυθούν κάποια άλλα προβληματάκια που έχει, είναι στην ουσία μόνο "διακοσμητικό"...

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

DragDrop με JavaScript

Δημοσίευση από skeftomilos » 07 Οκτ 2005 10:06

mat_ έγραψε:Υπάρχει τρόπος πατώντας ένα κουμπί να κλείνει το "ψευδοπαράθυρο"?
Πολύ εύκολο. Για να κρυφτεί ένα οποιοδήποτε στοιχείο μιάς σελίδας, αρκεί να αλλάξουμε τη CSS ιδιότητα display σε none:

Κώδικας: Επιλογή όλων

<button onclick="document.getElementById&#40;'box'&#41;.style.display='none'">Close window</button>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

DragDrop με JavaScript

Δημοσίευση από JimKarvo » 06 Απρ 2006 17:15

Πολύ χρήσιμο για εμ΄να και το σιτε μου!

Αλλά πως γίνετε να μην είναι auto load? δλδ αν πάτω κάποιο κουμπί να ανοίγει μόνο!

[εσυ πες μου πως θα βγάλω το auto load, και οκ!]

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

DragDrop με JavaScript

Δημοσίευση από skeftomilos » 06 Απρ 2006 23:51

Είναι πολύ εύκολο. Αρχικά το box θα είναι κρυμμένο με ένα από τους πολλούς τρόπους που υπάρχουν, π.χ. display:none.

Κώδικας: Επιλογή όλων

<div id="box" style="display&#58;none">Drag this box!</div>
Μόλις πατηθεί το κουμπί θα εμφανίζεται με display:block.

Κώδικας: Επιλογή όλων

<button onclick="document.getElementById&#40;'box'&#41;.style.display='block'">Show the Box</button>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

DragDrop με JavaScript

Δημοσίευση από JimKarvo » 07 Απρ 2006 00:00

είναι πολύ εύκολο για εσένα skeftomile! :-P

θα το δοκιμάσω και θα σου πω!

να ρωτίσω αντελώς συμτωματικά, πιοι browsers, δεν υποστιρίζουν javascript?

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

DragDrop με JavaScript

Δημοσίευση από skeftomilos » 07 Απρ 2006 22:53

Νομίζω μόνο οι browser των κινητών τηλεφώνων ή άλλων mini συσκευών. Οι browsers για PC υποστηρίζουν όλοι την JS. Επίσης όλοι δίνουν τη δυνατότητα στο χρήστη να την απενεργοποιήσει αν το επιθυμεί.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

DragDrop με JavaScript

Δημοσίευση από JimKarvo » 07 Απρ 2006 23:34

Perfect!


Έχω πατατηρίσει, ότι μέχρι να φορτώσει όλη η σελίδα, το παράθυρο, δεν είναι moveable!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

DragDrop με JavaScript

Δημοσίευση από skeftomilos » 08 Απρ 2006 00:57

Μπορεί να γίνει άμεσα movable αλλά θέλει κάμποσες αλλαγές ο κώδικας. Τα συμβάντα document.onmousemove και document.onmouseup μπορούν να συνδεθούν οποιαδήποτε στιγμή, πριν ή μετά το window.onload. Για το συμβάν onmousedown του box θα πρέπει να προστεθεί το σχετικό attribute μέσα στην HTML:

Κώδικας: Επιλογή όλων

<div id="box" onmousedown="onomaRoutinas&#40;&#41;">Drag this box!</div>
Σε άλλους κώδικες που έχω δει για dragging, συνήθως χρησιμοποιούνται αποκλειστικά τα events του document.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

DragDrop με JavaScript

Δημοσίευση από JimKarvo » 09 Απρ 2006 16:00

Respect skeftomile!

Μπ[ορώ να το κάνω πατώντας κάποιο Λινκ, να κάνει refresh to popup? [όχι όλη η σελίδα]]

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης