Ankündigung

Einklappen
Keine Ankündigung bisher.

Drag and Drop mit HTML5

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 4
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 3 4 Weiter
  • #1

    Drag and Drop mit HTML5

    Morgen Community,
    ich bin dabei ein CMS zu schreiben. Kenne mich aber mit den Funktionalitäten von HTML5 noch fast garnicht aus. Ich brauche aber jetzt dringend eine "Drag and Drop" Lösung für mein Problem.

    Hier ne grobe Grafik


    Wordpress:
    Wordpress hat ein tolles Beispiel, aber dahinter komme ich nicht, wie das funktioniert.

    Was ich nun genau möchte ist:
    Die Widget sollen in einen Formular rübergezogen (unendlich nutzbar) werden. Im Formular sollen sie dann id des widget untergebracht werden. Wenn man die Reihenfolge ändern möchte, zieht man das Widget zwischen 2.

    Wie gesagt, ich kenne die Möglichkeiten von HTML5 noch nicht. Ich wäre euch dankbar wenn ihr mir Tutorials dazu zeigen könnten die meine Wünsche entsprechen

    Gruß,
    Kev
    Stichworte: php drag drop html5
  • #2
    Ich würde Dir jQuery UI und Draggable/Sortable empfehlen.
    [COLOR="#F5F5FF"]--[/COLOR]
    [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
    [COLOR="#F5F5FF"]
    --[/COLOR]

    Kommentar

    • #3
      Okay danke nikosch Hast du eventuell auch die passenden Beschreibungen dafür i.wo auf lager?

      Kommentar

      • #4
        Die Sachen sind auf der Projektseite wohldokumentiert.

        [edit]

        Auf den flüchtigen Blick sollte sortable > connect-lists ziemlich genau Deinen Anwendungsfall abbilden.
        [COLOR="#F5F5FF"]--[/COLOR]
        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
        [COLOR="#F5F5FF"]
        --[/COLOR]

        Kommentar

        • #5
          Zuletzt geändert von Jumper93; 24.03.2014, 10:58.
          Moinsen, nikosch, sei mir jetzt nicht böse oder so xD ich habe kaum was mit jquery gemacht, bin aber gerade dabei mich bisschen darin einzuarbeiten^^ habe aber dennoch ziemliche schwierigkeiten damit

          ich habe etwas geforscht und mein bisheriger code sieht so aus xD

          PHP-Code:
          <!doctype html>
          <          html lang="en">
              <          head>
                  <          meta charset="utf-8">
                  <          title>jQuery UI Draggable + Sortable</title>
                  
                  <          link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
                  <          script src="//code.jquery.com/jquery-1.9.1.js"></script>
                  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
                  <link rel="stylesheet" href="/resources/demos/style.css">
                  
                  <style>
                      ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
                      li { margin: 5px; padding: 5px; width: 150px; }
                  </style>
                  
                  <script>
                      $(function() {
                          $( "#sortable" ).sortable({
                              over: function(){
                                  removeIntent = false;
                              },
                              
                              out: function(){
                                  removeIntent = true;
                              },
                              
                              beforeStop: function(event, ui){
                                  if(removeIntent == true) {
                                      ui.item.remove();
                                  }
                              },
                              
                              update: function(){
                                  $('#message').html('Changes not saved');
                                  $('#message').css("color","red");
                              }
                          });
                          
                          $( "#draggable" ).draggable({
                              connectToSortable: "#sortable",
                              helper: "clone",
                              revert: "invalid"
                          });
                          
                          $( "ul, li" ).disableSelection();
                      });
                  </script>
              </head>
              
              <body>
                  <ul>
                      <li id="draggable" class="ui-state-highlight">Drag me down</li>
                  </ul>
                  <ul id="sortable">
                      <li class="ui-state-default">1</li>
                      <li class="ui-state-default">2</li>
                      <li class="ui-state-default">3</li>
                      <li class="ui-state-default">4</li>
                      <li class="ui-state-default">5</li>
                  </ul>
                  <div id="message"></div>
                  
                  <a href="" id="button">Save</a>
              </body>
          </html> 
          Alles schön und gut^^

          ich möchte jetzt statt
          <li id="draggable" class="ui-state-highlight">Drag me down</li>
          informationen von meine Widget speichern. sollte ich das so machen?
          <li id="draggable" class="ui-state-highlight">Name vom Widget</li>
          oder kann ich da i.wo noch eine ID verstecken?

          Hinterher möchte ich diese Informationen von meinen Widget auch an diese Funktion weitergeben und die dann so abspeichern
          PHP-Code:
          update: function(){
              $(          '#message').html('Changes not saved');
              $(          '#message').css("color","red");
          } 
          wie mache ich das nun genau? ich habe i.wo gelesen, das ich $.post('save.php') machen kann, wie übertrage ich aber nun zb den Inhalt in die datei^^

          Kommentar

          • #6
            Lass mal draggable weg und setz nur auf sortable-connect-list, wie ich oben geschrieben habe.
            IDs kannst Du bspw. in ein data-Attribut packen.
            [COLOR="#F5F5FF"]--[/COLOR]
            [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
            [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
            [COLOR="#F5F5FF"]
            --[/COLOR]

            Kommentar

            • #7
              warum sollte ich draggable jetzt wegnehmen?^^

              Kommentar

              • #8
                Zuletzt geändert von Jumper93; 24.03.2014, 13:15.
                DEMO: http://jsfiddle.net/XhaZ5/

                Damit klappt noch alles mit dem hier:
                PHP-Code:
                <ul id="sortable" class="ui-sortable">
                     <                li id="widget_1">1</li>
                     <                li id="widget_2">2</li>
                     <                li id="widget_3">3</li>
                </                ul> 
                Wenn ich jetzt aber von Widget 1 rüberziehe, ändert sich die ID vom "clone"
                sieht dann so aus:
                PHP-Code:
                <ul id="sortable" class="ui-sortable">
                     <                li id="widget_1">1</li>
                     <                li id="widget_2">2</li>
                     <                li id="widget_1">1</li>
                     <                li class="widget ui-draggable" style="display: list-item;">Widget 1</li> //er übernimmt die ID nicht....
                </ul> 

                Kommentar

                • #9
                  warum sollte ich draggable jetzt wegnehmen?^^
                  Ich hab das ja oben mit / geschrieben. Eben was ich mir vorstellen kann. Später habe ich dann gesehen, dass die Lösung auch mit Sortable allein zu stemmen sein sollte.

                  Wenn ich jetzt aber von Widget 1 rüberziehe, ändert sich die ID vom "clone"
                  Eine ID ist sowieso wenig hilfreich, wenn Du Elemente clonen willst. Ich habe ja oben geschrieben: Benutze data. Genau dafür ist es da.
                  [COLOR="#F5F5FF"]--[/COLOR]
                  [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                  [COLOR="#F5F5FF"]
                  --[/COLOR]

                  Kommentar

                  • #10
                    draggable funktioniert ja bei mir alles^^

                    das mit der ID kriege ich aber nicht so ganz hin...
                    PHP-Code:
                    var order = $('#sortable').sortable('serialize'); = holt ja alles und packt diese in einen array (soweit ich das verstanden habe) 
                    wie soll ich das aber jetzt mit data machen?

                    Kommentar

                    • #11
                      http://jsfiddle.net/v7VZt/1/
                      [COLOR="#F5F5FF"]--[/COLOR]
                      [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                      [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                      [COLOR="#F5F5FF"]
                      --[/COLOR]

                      Kommentar

                      • #12
                        Ich sehe gerade, serialize hat auch nen options-Parameter.

                        PHP-Code:
                        $('#sortable').sortable('serialize' , { attribute : 'data-id'}); 

                        Hier noch mal eingebaut + Bugfix für die Zurückschieben-Funktion: http://jsfiddle.net/v7VZt/3/
                        [COLOR="#F5F5FF"]--[/COLOR]
                        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                        [COLOR="#F5F5FF"]
                        --[/COLOR]

                        Kommentar

                        • #13
                          deins ist super bei meinen funktioniert das mit attribute: 'data-id' nicht ganz... eigentlich passiert mit diesen eigt garnichts xD
                          weißt du mehr?^^

                          Kommentar

                          • #14
                            Du musst die dann auch als Attribute angeben.
                            <li data-id="widget_1">Widget 1</li>
                            Wie gesagt, id ist wenig förderlich, wenn es um Klonen von Elementen geht.

                            deins ist super
                            Kannst Du gern benutzen.
                            [COLOR="#F5F5FF"]--[/COLOR]
                            [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                            [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                            [COLOR="#F5F5FF"]
                            --[/COLOR]

                            Kommentar

                            • #15
                              Du musst die dann auch als Attribute angeben.
                              Das habe ich ja auch gemacht^^ Das klonen selbst funktioniert bestens, ist halt nur das übertragen an die $.post.... also das mit serialize ist das hauptsächliche problem^^

                              var order = $('#sortable').sortable ('toArray' , {attribute : 'data-id'});
                              console.log (order);
                              diese gibt genau das in der konsole wieder, was ich hätte xD aber diese übergibt dies nicht richtig an post weiter^^

                              Kommentar

                              Vorherige 1 2 3 4 Weiter
                              Lädt...
                              X