[Erledigt] JQuery Drag & Drop Abhängigkeit

[Snooze]

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:

$(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

[der_robert]

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 )

[litterauspirna]

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?

[Snooze]

@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.

<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>

[litterauspirna]

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.

[Snooze]

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

[rudygotya]

http://www.quasipartikel.at/multiselect/

[Snooze]

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