[JQUERY] Jquery Darg and Drop Helper Clone Matrix

[Dieterr]

Hallo,
ich versuche seit Tagen folgende Aufgabe zu lösen:
- eine 4x4 Felder große Matrix (16 x 100px x100px große divs)
- fünf Bilder daneben (ebenfalls 100px x 100 px)
- nun soll man die Bilder, als clone in die Felder ziehen können:

 $( "#Mein Bild" ).draggable({
appendTo: "body",
helper: "clone"
});

 $( "#Meine 16 felde" ).droppable({
}

und wieder heraus.
Im Grunde wie in diesem beispiel:
Droppable | jQuery UI

Kennt Jemand ein gutes Tutoril, oder eine Anleitung?
Bei der Vielzahl der Scripte ich ich mir ansah und testete blicke ich nun leider nicht mehr durch!
Dieses hier z. B. funktioniert bei zumindest zwei Feldern (muss ich dann noch in eine Funktion packen?!?)

jQuery( document ).ready(function( $ ) {

$('li').draggable({  
    containment: 'document',
    revert: true, 
    start: function() {
            contents = $(this).html();
                      }
});


$('#matrix1').droppable({ 
  accept: '.item',
    drop: function(){
                    $('#matrix1').replaceWith(contents);
                    } 
});

$('#matrix2').droppable({ 
  accept: '.item',
    drop: function(){
                    $('#matrix2').replaceWith(contents);
                    } 
});


});

So sieht ein Teil der Matrix aus

<div id="Matrix1" style="float: left; width: 25%; max-width: 100px; margin: 0px auto;"><img style="max-width: 100%; height: auto;" src="bootstrap_matrix/gfx/Feld.png" alt="Feld" /></div>
<div id="Matrix2" style="float: left; width: 25%; max-width: 100px; margin: 0px auto;"><img style="max-width: 100%; height: auto;" src="bootstrap_matrix/gfx/Feld.png" alt="Feld" /></div>
<div id="Matrix3" style="float: left; width: 25%; max-width: 100px; margin: 0px auto;"><img style="max-width: 100%; height: auto;" src="bootstrap_matrix/gfx/Feld.png" alt="Feld" /></div>

daneben ein Auszug aus der Liste (li)

<ul style="padding-left: 0px;">
<li class="item" style="z-index:2; list-style:none;"><img class="gemu" src="bootstrap_matrix/gfx/KarteA.png" style="border:1px solid #021a40; max-width: 100px; margin: 0px auto;"/></li>

kann mir jemand Helfen, einen Tip geben, ein gutes Turorila dazu empfehlen

Gruß Keith

 

[Sempervivum]

Interessiert mich. Poste doch mal die URL der ganzen Seite.

 

[Dieterr]

Hi,
ich versuche mal auf jsfiddle was zu generiere, okay?
Gruß Dieter

 

[Sempervivum]

Ja, tu das. Ist die originale Seite zu umfangreich?

 

[Dieterr]

Hi,
die Originalseite gibt es "noch" nicht
Xamp Installation und Wordpress.
Hier:Matrix - JSFiddle
hab' ich mal das grundgerüst gebaut.
Mir gelingt es nun leider nicht mal mehr die Bilder dragable zu erzeugen.
Vielleicht Kannst du mir kurz erklären welche Jquery Bibliothek ich am besten nutzen soll.
Irgendwie bekomme ich das ganze konzept nicht mehr hin?!?
Die Bilder sollen eigentlich "nur" in die Matrix geschoben werden können, bzw. clone davon.
und auch wieder heraus..
Toll, wenn du mir dabei hilfst

Gruß Dieter

 

[Sempervivum]

Wenn ich das richtig sehe, ist draggable in jQuery UI implementiert, das heißt, Du müsstes dieses auch noch einbinden.

- - - Aktualisiert - - -

Außerdem verwendest Du im Javascript die jQuery-Notation für DOM-ready und gleichzeitig die onload-Option von jsFiddle. Wenn das Skript beim Load aufgerufen wird, ist das DOM-ready jedoch vorbei und triggert nicht mehr.
Außerdem hast Du in deinem ersten Posting im drop-Handler die Variable contents verwendet. Die ist jedoch unbekannt. Zugriff auf das Bildobjekt bekommst Du über den Eingangsparameter ui, die Komponente draggable.
So funktioniert es:
http://jsfiddle.net/Sempervivum/txrfm7qm/12/