Drag&Drop seitenübergreifend ?

S

Stephan Erbe

Hallo,
ich habe folgendes Problem. Und zwar möchte ich in meiner Homepage Bilder per Drag&Drop verschieben. Im Netz gibt es dazu natürlich viele einfache und komplizierte Scripte. So weit so gut, doch habe ich speziell nach meinem Wunsch nichts finden können und ich habe auch selber keine wirkliche Idee das zu realisieren.

Und zwar habe ich 2 Seiten, eine index1.html und eine index2.html...auf der index2.html befinden sich in einer Box viele Bilder. Diese Bilder soll nun der Besucher je nach belieben in eine 2. andere Box verschieben können, die sich ABER sowohl auf index2.html befindet UND auch auf index1.html. Wenn der Besucher nun auf index1.html zurückkehrt soll er seine ausgewählten Bilder in seiner Box vorfinden (-> wahrscheinlich auch nur mit Cookies möglich?). Sozusagen ein Drag&Drop zwischen verschiedenen Unterseiten der Homepage. Gibt es da eine elegante Lösung? Was mir bisher nur einfällt wäre vielleicht durch iFrames****

Liebe Grüße
Stephan
 
Hmm, nicht ganz klar was du meinst und wo die Bilder herkommen. Normal hast du ja die Bilder die zu einem bestimmen Benutzer gehören in der Datenbank gespeichert, mit zugehöriger Ordner ID. Wenn du jetzt per drag&drop ein Bild von einem Ordner in den anderen schiebst, dann musst eine Callback Funktion ausgeführt werden, die einen ajax - Request an den Server sendet mit der Information, dass BildXY nun der OrdnerID Z zugeordnet werden soll.
 
Ok ich erklärs nochmal:
Vorerst habe ich extra Besucher geschrieben, da ich keine daten (via Login oder Registrierung) speichern möchte. Deshalb müsste das ganze schonmal nur mit Cookies realisierbar sein, wer keine cookies aktiviert hat hat halt Pech gehabt. Das heißt jetzt natürlich auch dass man bei der Lösung auch die Datenbank vergessen kann.

Auf meiner Seite gibt es einen Bereich (z.b. index2.html) mit Fotos, welche in divs eingebettet sind:

<div1><a href...<img...</a></div1>
<div2><a href...<img...</a></div2>
<div3>a href...<img...</a></div3>
usw...

so nun kann sich der Besucher sein Lieblingsbild aussuchen und es in eine leere Div Box reinkopieren, die sich meinetwegen rechts von den Bildern befindet. Wenn der User jetzt auf die Startseite zurückgelangt (index1.html) sieht er sein Bild dort wieder (meinetwegen in der Sidebar, aber das is ja erstmal Wurscht), welches er auf index2.html in die leere Box verschoben hatte. Hab die ganze Nacht nach einem Ansatz gesucht, aber bisher vergebens :) Vielleicht müsste man den Inhalten der div's ID's geben und diese dann in Cookies abspeichern.
 
Stephan Erbe hat gesagt.:
Ok ich erklärs nochmal:
Vorerst habe ich extra Besucher geschrieben, da ich keine daten (via Login oder Registrierung) speichern möchte. Deshalb müsste das ganze schonmal nur mit Cookies realisierbar sein, wer keine cookies aktiviert hat hat halt Pech gehabt. Das heißt jetzt natürlich auch dass man bei der Lösung auch die Datenbank vergessen kann.
Zum Vergrößern anklicken....

Bei der Lösung die ich genannte habe würde auch funktionieren ohne wenn der Benutzer registriert ist, indem man ihn z.B. über ein Cookie identifiziert. Wie du ja schon schreibst.

Deine Idee den HTML Code in einem Cookie zu speichern ist quatsch. Stattdessen kannst du nur den Namen/ID des entsprechenden Bildes als Cookie speichern und die entsprechende OrdnerID dazu und dann eben beim Aufruf der Seite entsprechend die Bilder laden.

Hat deine Seite überhaupt eine serverseitige Sprache im Hintergrund, oder hast du nur statische Seiten?
 
Ja mit Html und Cookie ist quatsch...ne hab net nur statische Seiten, php mit mysql benutze ich hauptsächlich...
also in meiner mysql datenbank haben die bilder ID's (auto increment) und werden auch auf der website so ausgegeben (höchste id bzw neuester eintrag zuerst). Einen code, dass sich die ID's in der Datenbank ändern wenn ich die Bilder auf der website per dragdrop verschiebe, habe ich schonmal gemacht, das wäre kein Ding. Aber wenn du sagst dass jeder Besucher seine eigene Bilder-Reihenfolge(id reihenfolge) haben kann, welche in ein Cookie gespeichert wird - aber ohne dass sich die Datenbank verändert, dann muss ich jetzt erstmal versuchen ein Cookie Script dafür zu erstellen
 
So ich habe jetzt mal zum testen Jquery benutzt

session1.html:
HTML: 
<div class="column" id="col1"> 
    <div class="portlet" id="eins"> 

        <div class="portlet-header">Bild1</div> 
        <div class="portlet-content"> 
            beschreibungeins
        </div> 
    </div> 
    <div class="portlet" id="zwei"> 
        <div class="portlet-header">Bild2</div> 
        <div class="portlet-content"> 

            beschreibungzwei
        </div> 
    </div> 
    <div class="portlet" id="drei"> 
        <div class="portlet-header">Bild3</div> 
        <div class="portlet-content"> 
            beschreibung3
        </div> 
    </div> 
    <div class="portlet" id="vier"> 

        <div class="portlet-header">Bild4</div> 
        <div class="portlet-content"> 
          Beschreibungvier        </div> 
    </div> 
    <div class="portlet" id="fünf"> 
        <div class="portlet-header">Bild5</div> 
        <div class="portlet-content"> 
            Beschreibungfünf
        </div> 

    </div> 
</div> 


<div class="column" id="col2"> 
</div>

und hier setze ich den cookie:

Code: 
function saveOrder() { 
    $(".column").each(function(index, value){ 
        var colid = value.id; 
        var cookieName = "cookie-" + colid; 
        
        var order = $('#' + colid).sortable("toArray"); 
        
        for ( var i = 0, n = order.length; i < n; i++ ) { 
            
            var v = $('#' + order[i] ).find('.portlet-content').is(':visible'); 
          
            order[i] = order[i] + ":" + v; 
        } 
        $.cookie(cookieName, order, { path: "/", expiry: new Date(2012, 1, 1)}); 
    }); 
}

//so nun kommt der dragdrop script teil:

$(document).ready( function () { 
    $(".column").sortable({ 
        connectWith: ['.column'], 
        stop: function() { saveOrder(); } 
    }); 

    $(".portlet") 
        .addClass("ui-widget ui-widget-content") 
        .addClass("ui-helper-clearfix ui-corner-all") 
        .find(".portlet-header") 
        .addClass("ui-widget-header ui-corner-all") 
        .prepend('<span class="ui-icon ui-icon-minus"></span>') 
        .end() 
        .find(".portlet-content"); 

    restoreOrder(); 

    $(".portlet-header .ui-icon").click(function() { 
        $(this).toggleClass("ui-icon-minus"); 
        $(this).toggleClass("ui-icon-plus"); 
        $(this).parents(".portlet:first").find(".portlet-content").toggle(); 
        saveOrder(); // This is important 
    }); 
    $(".portlet-header .ui-icon").hover( 
        function() {$(this).addClass("ui-icon-hover"); }, 
        function() {$(this).removeClass('ui-icon-hover'); } 
    ); 
});

So nun will ich den Cookie auf einer anderen Seite wieder ausgeben (session2.html):

Code: 
function restoreOrder() { 
    $(".column").each(function(index, value) { 
        var colid = value.id; 
        var cookieName = "cookie-" + colid 
        var cookie = $.cookie(cookieName); 
        if ( cookie == null ) { return; } 
        var IDs = cookie.split(","); 
        for (var i = 0, n = IDs.length; i < n; i++ ) { 
            var toks = IDs[i].split(":"); 
            if ( toks.length != 2 ) { 
                continue; 
            } 
            var portletID = toks[0]; 
            var visible = toks[1] 
            var portlet = $(".column") 
                .find('#' + portletID) 
                .appendTo($('#' + colid)); 
            if (visible === 'false') { 
                portlet.find(".ui-icon").toggleClass("ui-icon-minus"); 
                portlet.find(".ui-icon").toggleClass("ui-icon-plus"); 
                portlet.find(".portlet-content").hide(); 
            } 
        } 
    }); 
}

Er gibt jetzt in session2.html genau diesselbe div reihenfolge aus wie in session1.html. Wie man oben im html Teil sehen kann gibt es 2 Spalten, "col1" und "col2". In session1.html befinden sich alle divs in "col1", nun möchte ich ein div nach col2. rüberschieben und es auf session2.html genauso, klappt auch alles wunderbar, Problem ist nur: Auf session2.html werden alle anderen divs angezeigt, ich will aber nur dass das eine div in "col2" angezeigt wird. Ich hab schon probiert auf session2.html "col1" mit hidden befehl unsichtbar zu machen, aber das sind eher verzweifelte versuche^^
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück