DragDrop με JavaScript

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

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

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

DragDrop με JavaScript

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

Υπάρχουν διάφοροι τρόποι. Ένας είναι να καλυφθεί η επιφάνεια του box με ένα iframe που θα κάνει reload κάθε λίγο με τη βοήθεια μίας οδηγίας <meta http-equiv="refresh" κ.λπ., αλλά δεν ξέρω αν αυτό προκαλέσει προβλήματα με το dragging. Άλλη πιο σίγουρη και καθαρή λύση είναι να φορτώνονται νέα περιεχόμενα για το box με τη βοήθεια AJAX requests. Μια τρίτη λύση είναι να φορτώνονται εξαρχής όλα τα εναλλακτικά περιεχόμενα του box και να εναλλάσονται στον browser χωρίς επικοινωνία με το server. Η αρχική αποθήκευση μπορεί να είναι σε JavaScript strings ή σε κρυμμένα divs ή textareas.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

DragDrop με JavaScript

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

Μάλλον την δεύτερη λύση προτιμώ!

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

DragDrop με JavaScript

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

Ένα παράδειγμα ανανέωσης του box με AJAX request. Η παρακάτω σελίδα πρέπει να ζητηθεί μέσω του IIS, δηλαδή το url στον browser πρέπει να έχει τη μορφή http://localhost/ajax.htm όχι C:\Documents\ajax.htm.

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

<html>
  <head>
    <title>AJAX-Popup-Refersh</title>
    <style type="text/css">
      body &#123; 
        font-family&#58; verdana;
      &#125;
      #box &#123;
        position&#58; absolute;
        left&#58; 150px;
        top&#58; 100px;
        width&#58; 240px;
        height&#58; 100px;
        font-size&#58; large;
        font-weight&#58; bold;
        background-color&#58; #ffbf00;
        border&#58; 1px solid #7f5f00;
        text-align&#58; center;
        line-height&#58; 100px;
      &#125;
    </style>
    <script type="text/javascript">
      var REQUEST_URL = 'data.asp'
      var INTERVAL = 2000
      window.onload = function&#40;&#41; &#123;
        setTimeout&#40;function&#40;&#41; &#123;
          var self = arguments.callee
          var request
          if &#40;window.XMLHttpRequest&#41; &#123;
            request = new XMLHttpRequest&#40;&#41;
          &#125; else if &#40;window.ActiveXObject&#41; &#123;
            request = new ActiveXObject&#40;'Microsoft.XMLHTTP'&#41;
          &#125;
          if &#40;request&#41; &#123;
            request.onreadystatechange = function&#40;&#41; &#123;
              if &#40;request.readyState == 4 && request.status == 200&#41; &#123;
                document.getElementById&#40;'box'&#41;.innerHTML = request.responseText
                setTimeout&#40;self, INTERVAL&#41;
              &#125;
            &#125;
            request.open&#40;'GET', REQUEST_URL + '?salt=' + new Date&#40;&#41;.getTime&#40;&#41;&#41;
            request.send&#40;null&#41;
          &#125;
        &#125;, INTERVAL&#41;
      &#125;
    </script>
  </head>
  <body>
    <h2>AJAX-Popup-Refersh</h2>
    <div id="box">First Content</div>
  </body>
</html>
Στον ίδιο φάκελο πρέπει να βρίσκεται και η παρακάτω ASP σελιδούλα (data.asp), που απλά επιστρέφει μία τυχαία λέξη.

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

<%@LANGUAGE=JScript%>
<%
  Response.ContentType = 'text/plain'
  var animals = &#91;'Jellyfish', 'Panther', 'Elephant', 'Snake', 'Dolphin', 'Eagle',
                 'Dinornis', 'Mastodon', 'Anteater', 'Hyena', 'Unicorn'&#93;
  Response.Write&#40;animals&#91;Math.floor&#40;Math.random&#40;&#41; * animals.length&#41;&#93;&#41;
%>
Δεν είπε κανείς ότι η AJAX είναι εύκολη τεχνική :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

DragDrop με JavaScript

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

Μπα.. δεν γίνετε με τπτ αφτο που λες!

Λοιπών!

γίνετε τουλάχιστων, όταν κάποιος πατάει το link για ανοίγει το pop-up, να ανανεώνετε το box?

Διότι θα επικοινωνεί με την mysql, για τελευταίες υποβολές, με σκοπό αν δεν κάνει refresh όλη την σελίδα, να μην γίνετε update και το box!

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

DragDrop με JavaScript

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

Με ποιο τρόπο σκέφτεσαι να χρησιμοποιήσεις το ψευδο-popup;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

DragDrop με JavaScript

Δημοσίευση από _Invisible_ » 05 Ιαν 2008 01:19

Μ' άρεσε πολύ το script σου skeftomilos και μάλιστα μου είναι και πολύ χρήσιμο καθώς είχα στο μυαλό μου να χρησιμοποιήσω κάτι τέτοιο. Μόνο που θα ήθελα να λειτουργεί λίγο διαφορετικά.

Δηλαδή: δεν ξέρω αν έχεις δει το iGoogle, εκεί που σου εμφανίζει πολλά blocks από διάφορες υπηρεσίες και μπορείς να κάνεις drag ένα box σε κάποιο άλλο div. Θα ήθελα σε ένα table, να μπορώ να μετακινώ τα cells του με παρόμοιο τρόπο και μετά να μπορώ να αποθηκεύσω το order που έχει στην DB (εντάξει αυτό δεν είναι δύσκολο, απλά θέλω να μπορώ να τα πάρω σε μία μορφή σαν 'item_name' = 'onoma', 'order' = 10 και μετά να τα εμφανίζει έτσι όπως τα είχε ορίσει ο χρήστης να εμφανίζονται.

Είναι δύσκολο κάτι τέτοιο το ξέρω, αλλά θα με βοηθούσε πολύ αν έκανες κάποιο παράδειγμα ή έστω μου έδινες ένα link με κάποιο παράδειγμα. Έψαξα, αλλά δεν βρήκα κάτι τέτοιο ακριβώς, βρήκα μόνο σαν το box που έχεις κάνει και πηγαίνει σε όλη την σελίδα -- εγώ θέλω να το περιορίσω μέσα σε ένα table.

Ευχαριστώ.

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

DragDrop με JavaScript

Δημοσίευση από skeftomilos » 05 Ιαν 2008 01:31

The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

DragDrop με JavaScript

Δημοσίευση από _Invisible_ » 05 Ιαν 2008 01:43

Thanks mate, θα δω αν μπορεί να γίνει και σε table.

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

DragDrop με JavaScript

Δημοσίευση από _Invisible_ » 05 Ιαν 2008 01:47

πάντως... το βλέπω λιγάκι βαρύ... δεν είναι;

Άβαταρ μέλους
Asmodeus
Δημοσιεύσεις: 36
Εγγραφή: 08 Οκτ 2005 18:44
Τοποθεσία: ΑΘΗΝΑ

DragDrop με JavaScript

Δημοσίευση από Asmodeus » 23 Μαρ 2009 13:22

Thanks παιδιά!! Πολύ καλό βοήθημα. Να ρωτήσω...
Θέλω να κάνω κάτι αντίστοιχο, αλλά θέλω να ξέρω την περιοχή που θα το αφήσω.
πχ

boxA boxB

θέλω να μετακινώ το boxA μέσα στο boxB και να κάνω έλεγχο οτι οντως είναι εκεί.

Ξέρει κανείς;;; :oops:
Μόνο οι θαρραλέοι έχουν το κουράγιο να φθάνουν εκεί που οι άγγελοι έχουν το θάρρος να πετούν...
Εικόνα

trilos021
Δημοσιεύσεις: 131
Εγγραφή: 04 Νοέμ 2003 18:06

DragDrop με JavaScript

Δημοσίευση από trilos021 » 17 Απρ 2010 06:14

Kαι ναι!το ξέθαψα!πως μπορώ να ορίσω το draggable div να μην βγαίνει απο το layout?δηλαδή να μην μπορώ να το μετακινώ όσο αριστερα πχ θέλω αλλα να βρίσκεται μέσα στα όρια που είχα αρχικά ορίσει στο layout?

Απάντηση

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

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

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