Ergebnis 1 bis 1 von 1
Like Tree1Likes
  • 1 Post By trix0

Thema: Drag&Drop in verschiedene <div> Container

  1. #1
    trix0 ist offline Grünschnabel
    registriert
    01-02-2021
    Beiträge
    4

    Drag&Drop in verschiedene <div> Container

    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-Code:
       <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
    Geändert von trix0 (01-02-2021 um 03:15 Uhr) Grund: Problem selbstständig gelöst
    mikdoe likes this.

Ähnliche Themen

  1. Drag and Drop
    Von pullem im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 12-06-2013, 22:15
  2. drag and drop und div id
    Von chappy_berlin im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 04-11-2010, 00:37
  3. drag and drop
    Von campi im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 07-10-2010, 11:55
  4. Antworten: 8
    Letzter Beitrag: 10-04-2007, 10:26
  5. Drag and Drop
    Von Metabolic119 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 15-03-2007, 12:04

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •