[jQuery] Drag & Drop & Img & Divs

[newwarrior]

Hi,

ich würde gerne realisieren :

Links auf einer Seite sind 6 Divs, auf der rechten Seite 6 Grafiken.
Jetzt möchte ich gerne mit jQuery die Bilder in dieses Div's ziehen können.
Dabei sollen dann auch in den Div's in der id="" automatisch der Grafikname gespeichert werden.
Denn beim klicken auf einen Button sollen diese Daten dann in der DB gespeichert werden.

Wie kann ich das am besten umsetzen?

Danke

 

[Maik]

Hi,

hast du dazu schon mal unsere Suchfunktion befragt?

Du bist schließlich nicht der erste User in unserem Forum, der sowas umsetzen möchte.

Ebenso hab ich beim Lesen deines Beitrags den Eindruck, dass du dich vorab noch nicht bei jQuery und jQuery UI ob der Möglichkeiten informiert hast.

mfg Maik

 

[Sven Mintel]

Moin,

Ich musste grad selbst ne Weile suchen, das Thema hatten wir im letzten Jahr mal, ich hatte dazu auch ein Beispiel präsentiert.

Gefunden hab ich es auch wieder
http://www.tutorials.de/forum/javas...ortierung-und-verschiebung-2.html#post1776342

Spoiler

Memo für mich: besser taggen spart Zeit^ ^

 

[newwarrior]

Ok.
Das war das was ich gesucht habe, jedoch habe ich noch eine Frage dazu.
Ich habe es ein wenig abgeändetr um damit auch mit DIV's zu arbeiten:

<div  id="sortable">

        <div id="target" style="height:250px;width:100%;-moz-border-radius:10px;-khtml-border-radius:30px;border:1px solid #fff;"></div>

        <div id="test" style="width:100%;-moz-border-radius:10px;-khtml-border-radius:30px;border:1px solid red;">
<img src="http://www.tutorials.de/forum/customavatars/avatar23393_2.gif">
        <img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif">
        <img src="http://www.tutorials.de/forum/customavatars/avatar59490_2.gif"></div>

</div>

<script type="text/javascript">
<!--
$("#sortable #test #target").sortable({
  connectWith: '#sortable #text #target'
  }).disableSelection();

Was mache ich falsch?
Wie kann ich das machen, das nur ein Objekt in den Div geschoben werden kann?
danke

 

[Maik]

Das rotmarkierte "x" sollte wohl ein "s" sein:

$("#sortable #test #target").sortable({
  connectWith: '#sortable #text #target'
  }).disableSelection();

Und dein Markup entspricht überhaupt nicht diesem jQuery-"Descendant Selector", der, wie auch von den CSS-Selektoren für Nachfahren bekannt, ineinander verschachtelte (Nachfahren-)Elemente definiert:

<div id="sortable">
      <div id="test" style="width:100%;-moz-border-radius:10px;-khtml-border-radius:30px;border:1px solid red;">
            <div id="target" style="height:250px;width:100%;-moz-border-radius:10px;-khtml-border-radius:30px;border:1px solid #fff;">
            </div><!-- /#target -->
            <img src="http://www.tutorials.de/forum/customavatars/avatar23393_2.gif">
            <img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif">
            <img src="http://www.tutorials.de/forum/customavatars/avatar59490_2.gif">     
      </div><!-- /#test -->
</div><!-- /#sortable -->

oder auch:

<div id="sortable">
      <div id="test" style="width:100%;-moz-border-radius:10px;-khtml-border-radius:30px;border:1px solid red;">
            <img src="http://www.tutorials.de/forum/customavatars/avatar23393_2.gif">
            <img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif">
            <img src="http://www.tutorials.de/forum/customavatars/avatar59490_2.gif">     
            <div id="target" style="height:250px;width:100%;-moz-border-radius:10px;-khtml-border-radius:30px;border:1px solid #fff;">
            </div><!-- /#target -->
      </div><!-- /#test -->
</div><!-- /#sortable -->

//edit: Deinem HTML-Code folgend würden die beiden jQuery-Selektoren so lauten:

$("#sortable #test").sortable({
  connectWith: '#sortable #target'
  }).disableSelection();

... oder, um hier einfach mal Svens Selektor "#sortable tbody td" in ein <div> zu portieren, eben nur:

$("#sortable div").sortable({
  connectWith: '#sortable div'
  }).disableSelection();

mfg Maik

 

[Sven Mintel]

Wie kann ich das machen, das nur ein Objekt in den Div geschoben werden kann?

Am Ende eines Sortiervorgangs feuert im Sortable der update-Event.
Diesen kannst du überwachen und das Sortable im Fall des Eintretens deaktivieren(Methode disable)

Die Beschreibungen zu den beiden genannten Stichwörtern findest du in der Doku