• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] Drag&Drop in verschiedene <div> Container

trix0

New member
Servus Leute,

ich habe folgendes vor. Ich habe 3 Container, in dieser sind verschiedene Div Container(items). Diese will ich per drag and drop untereinander verschieben können. Ich hab leider bisher noch nie mit jQuery gearbeitet. Wenn ich sowas realisieren musste habe ich es per HTML5 und JS gemacht, nur leider unterstützt das projekt kein HTML5.

mein Code:
HTML:
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
  $( function() {
    $( ".item" ).draggable();
    $( ".item" ).droppable();
  });
</script>

<body>
    <header>
            <h1>Inventar</h1>
    </header>
        <div  class="listitems">
        <div id="table1" class="list">
            <div  class="item">List Item 1</div>
            <div  class="item">List Item 4</div>
        </div>
        <div id="table2" class="list">
            <div id="item"class="item">List Item 2</div>
        </div>

        <div id="table3" class="list">
            <div id="item "class="item">List Item 3</div>
        </div>    
    </div>
</body>
  </script>

das ist, nenne ich mal das grundgerüst. So wenn ich jetzt ein Item nehme, kann ich diese nur innerhalb des eigenen container verschieben.

z.b. ich will "List Item 3" verschieben, kann ich es nur im Container "table 3" verschieben. Aber ich will diese z.b. in Container "table 1" verschieben. Diese soll sich den container dann anpassen.

Wie schaffe ich das denn? bzw. welche Funktionen muss ich mir da denn genauer anschauen?
________________________________________________________________________________________________
Edit:

ich habe jetzt gefühlt 4h daran gearbeitet um dann mein Problem hier zu posten. und 10 sec. danach kam mir die erleuchtung.

falls jemand die selbe Probleme hat:
https://jqueryui.com/sortable/#connect-lists
 
Zuletzt bearbeitet:
Zurück
Oben