Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] JQuery Drag & Drop Abhängigkeit

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] JQuery Drag & Drop Abhängigkeit

    Hallo liebe Gemeinde

    Ich habe für mein Projekt ein Dashboard erstellt, welches sich der Nutzer in seinen Einstellungen über Drag and Drop selber zusammenstellen kann:

    Code:
    $(document).ready(function() {
            var title = '';
            var content = '';
            var currentId = '';
            var showImg = '';
            $("#selectList li").draggable({
                containment: "document",
                revert: true,
                start: function() {
                    title = $(this).find('img').attr('title');
                    content = $(this).find('img');
                }
            });
            
            $("#dashboardConfigLayout span ").not('.layoutPlaceholder').droppable({
                tolerance: "pointer",
                hoverClass: 'dashboardSortableLayoutHover',
                drop: function() {
                    currentId = $(this).attr('id')+'_input';
                    
                    showImg = $(this).attr('id');
                    showImg = showImg.split('_', 1);
                    showImg += '_'+title.toLowerCase();
                    
                    content = '<img src="./icon/dashboard/'+showImg+'.png" />';
                    
                    $(this).html(content);
                    document.getElementById(currentId).value = title;
                }
            });
        });
    Nun stehe ich vor dem Problem, das einige Daten auf dem Dashboard über ajax nachgeladen werden, was allerdings nur reibungslos funktioniert, wenn jedes Element aus dem Draggable li nur einmal in dem Dashboard vorkommt.

    Nun meine Frage, gibt es eine Möglichkeit zwischen den Drag & Drop Elementen eine abhängigkeit zu schaffen, im Sinne von Element 1 wurde aus der liste gezogen, und verschwindet - bis es in dem Drop Teil (Dashboard) von einem anderen Element überlagert wird.

    Falls etwas unverständlich ist, bin ich gerne bereit weitere Erläuterungen zu geben.

    Gruß

    Snooze


  • #2
    Vergib doch für jedes Element eine eindeutige Kennung...

    Wie meinst du das mit "...von einem anderen Element überlagert wird.". Meinst du damit das das "untere" Element dann automatisch platz macht für das neue?

    Nachtran: http://johnny.github.io/jquery-sortable/ -> Serialization and delay ... vllt suchst du sowas? (nicht Serialization and delay sondern die art uns weise des Beispieles )

    Kommentar


    • #3
      Hallo, heißt das du willst aus einer Liste ein Element in einen z.B. Div rein ziehen. Wenn das Drop erfolgt ist in diesem DIV, soll dann der Listeneintrag aus der Liste verschwinden. Erst wenn aus dieser Liste ein neues / anderes Element in den Drop DIV gezogen wird, soll das alte Listen Element in der Liste wieder aktiv werden und das, was erneut rein gezogen wurde soll dann verschwinden, solange es im Drop DIV aktiv ist?
      Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
      http://www.lit-web.de

      Kommentar


      • #4
        @litterauspirna du hast es erfasst!

        Allerdings ist mein Aufbau da etwas anders:

        mein Drop Bereich in ein DIV mit der id="dashboardConfigLayout", in diesem DIV sind Formularfelder welche ich für das Wegspeichern der Einstellungen benötige mit den namen small_1 bis small_4 und big_1 bis big_6

        Der Bereich in welches die Elemente reingezogen werden sind alle span Elemente mit id small_1 bis small_4 und big_1 bis big_6.

        Beim Drop wird das IMG aus der Drag Liste durch ein Anzeigebild in dem Fall small oder big ersetzt, je nachdem in welches span es gezogen wurde.

        Abewr wie gesagt: litterauspirna du hast das Problem erkannt

        Also wie Stelle ich das am besten an?

        Falls mehr Code für besseres Verständnis gewünscht, einfach bescheid sagen.

        PHP-Code:
        <div style="background-color: #FFFFFF; margin-top: 12px;" id="dashboardConfigLayout">

                                    <input class="dashboardInputSmall" type="hidden" value="<?php echo $dashboardUserConfig['small_1']['name'?>" id="small_1_input" name="small_1_input"/>
                                    <input class="dashboardInputSmall" type="hidden" value="<?php echo $dashboardUserConfig['small_2']['name'?>" id="small_2_input" name="small_2_input"/>
                                    <input class="dashboardInputSmall" type="hidden" value="<?php echo $dashboardUserConfig['small_3']['name'?>" id="small_3_input" name="small_3_input"/>
                                    <input class="dashboardInputSmall" type="hidden" value="<?php echo $dashboardUserConfig['small_4']['name'?>" id="small_4_input" name="small_4_input"/>

                                    <input class="dashboardInputBig" type="hidden" value="<?php echo $dashboardUserConfig['small_1']['name'?>" id="big_1_input" name="big_1_input"/>
                                    <input class="dashboardInputBig" type="hidden" value="<?php echo $dashboardUserConfig['small_2']['name'?>" id="big_2_input" name="big_2_input"/>
                                    <input class="dashboardInputBig" type="hidden" value="<?php echo $dashboardUserConfig['small_3']['name'?>" id="big_3_input" name="big_3_input"/>
                                    <input class="dashboardInputBig" type="hidden" value="<?php echo $dashboardUserConfig['small_4']['name'?>" id="big_4_input" name="big_4_input"/>
                                    <input class="dashboardInputBig" type="hidden" value="<?php echo $dashboardUserConfig['small_5']['name'?>" id="big_5_input" name="big_5_input"/>
                                    <input class="dashboardInputBig" type="hidden" value="<?php echo $dashboardUserConfig['small_5']['name'?>" id="big_6_input" name="big_6_input"/>

                                    

                                    <span class="dashboardSortableLayoutSmall" id="small_1">                                
                                        <?php echo $dashboardConfigPrepare['small'][$dashboardUserConfig['small_1']['name']]; ?>
                                    </span>

                                    <span class="dashboardSortableLayoutSmall" id="small_2">
                                         <?php echo $dashboardConfigPrepare['small'][$dashboardUserConfig['small_2']['name']]; ?>
                                    </span>

                                    <span class="dashboardSortableLayoutSmall" id="small_3">
                                         <?php echo $dashboardConfigPrepare['small'][$dashboardUserConfig['small_3']['name']]; ?>
                                    </span>

                                    <span class="dashboardSortableLayoutSmall" id="small_4">
                                        <?php echo $dashboardConfigPrepare['small'][$dashboardUserConfig['small_4']['name']]; ?>
                                    </span>

                                   

                                    <span class="dashboardSortableLayoutBig" id="big_1">
                                        <?php echo $dashboardConfigPrepare['big'][$dashboardUserConfig['big_1']['name']]; ?>                               
                                    </span>

                                    <span class="dashboardSortableLayoutBig" id="big_2">
                                        <?php echo $dashboardConfigPrepare['big'][$dashboardUserConfig['big_2']['name']]; ?>    
                                    </span>

                                    <span class="dashboardSortableLayoutBig" id="big_3">
                                         <?php echo $dashboardConfigPrepare['big'][$dashboardUserConfig['big_3']['name']]; ?>       
                                    </span>
                                    
                                    <span class="dashboardSortableLayoutBig" id="big_4">
                                        <?php echo $dashboardConfigPrepare['big'][$dashboardUserConfig['big_4']['name']]; ?>    
                                    </span>

                                    <span class="dashboardSortableLayoutBig" id="big_5">
                                        <?php echo $dashboardConfigPrepare['big'][$dashboardUserConfig['big_5']['name']]; ?>    
                                    </span>

                                    <span class="dashboardSortableLayoutBig" id="big_6">
                                        <?php echo $dashboardConfigPrepare['big'][$dashboardUserConfig['big_6']['name']]; ?> 
                                    </span>
                                </div>

        Kommentar


        • #5
          Du könntest das anhand des Class Attributes lösen. Heißt, du hast in deiner Liste z.B. die Einträge bearbeiten, hinzufügen. Diese haben eine class edit und add.

          Wenn du diese nun in dein Dashbord rein ziehst musst du beim Drop einfach nur schauen ob im Dashbord ein Element mit der class edit oder add vorhanden ist, wenn ja dann ist es in der Liste deaktiviert.

          Gleiches gilt für das neu laden des Dashbords. Wo dann welche Werte dafür her kommen weiß ich nicht, ich kenne deine Anwendung nicht. HAst du etwas zum online testen? Wäre dann einfacher dir helfen zu können.
          Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
          http://www.lit-web.de

          Kommentar


          • #6
            Hey, danke für deine Antwort

            Ich werde mir das nach dem Mittag noch einmal genau angucken und versuchen es mit den css Klassen umzusetzen.

            Etwas zum Online Testen kann ich dir leider nicht anbieten, da es sich hier um ein geschlossenes System für Versicherungsmakler handelt...
            (So gerne ich es auch machen würde)

            Die Werte für die Konfiguration werden in einer Mysql Tabelle gespeichert, dort wird die LoginId, position (small_1,big_4,etc.) und der Konfigname (z.B. Kundenliste, Angebote, etc.) vermerkt.

            Wie gesagt ich versuch das mal so umzusetzen und melde mich dann nochmal, erstmal Vielen Dank für den Denkanstoß!

            Gruß

            Snooze

            Kommentar


            • #7
              http://www.quasipartikel.at/multiselect/
              I like cooking my family and my pets.
              Use commas. Don't be a psycho.
              Blog - CoverflowJS

              Kommentar


              • #8
                Hallo zusammen,

                ich habe es jetzt wie litterauspirna vorgeschlagen hat über eine CSS Klasse gelöst, die das Element aus der Liste, sobald es im Dashboard vorhanden ist,
                ausblendet, und wieder einbelndet, wenn ein anderes Config Element drüber geschoben (gedroppt) wird.

                @rudygotya Danke für den Link, werde ich mir auch noch einmal anschauen, evtl. geht es damit sogar einfacher / schöner.

                Danke an alle und Gruß

                Snooze

                Kommentar

                Lädt...
                X