# [jQuery] Drag & Drop & Img & Divs



## newwarrior (9. März 2010)

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 (9. März 2010)

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 (9. März 2010)

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 (9. März 2010)

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 (9. März 2010)

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 (9. März 2010)

newwarrior hat gesagt.:


> 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


----------

