jQuery Sortable Drag & Drop Anleitung – hinzufügen, löschen, Reihenfolge verändern

Mit jQuery Sortable kann man Elemente nach belieben neu positionieren und anordnen. Die Verwendung ist vergleichsweise einfach. Zunächst einmal musst Du jQuery UI herunterladen und in dein Template einbinden.

Oder Du lädst die Datei extern: https://code.jquery.com/ui/1.12.1/jquery-ui.js

Drag & Drop mit jQuery sortable

Füge oder entferne Boxen und ändere die Reihenfolge mit Deiner Maus. Alle Beispiele und genauere Erklärungen findest Du weiter unten:

Keine Produkte gefunden.

  • HTML
  • JS

    
    

        

        

        

            

                
1

            

        

    


    

        

        

        

            

                
2

            

        

    


    

        

            

                

                    
    
                        
                        
  • Box 3 hinzufügen
    • 
                        
  • Box 4 hinzufügen
    • 
                    

                

            

        

    

    

// DRAG & DROP
    jQuery( "div#example8" ).sortable({
		placeholder	:	'box placeholder',
        fixed		:	'div.box.empty',
		items		:	'div.box:not(.empty)',
		containment :   'article.single',
    });

// OPEN SELECT
jQuery('div#example8 div.box.empty div.select').on('click', function() {
    jQuery(this).toggleClass('open');
});

// ADD BOX
function addBox8( id ) {
	if ( id ) {
        var html    =   '
' + id + '
';
		jQuery(html).insertBefore( 'div#example8 div.box.empty' );
        removeBox8();
        maxShow8();
	} else {
        jQuery('div#example8 li').on('click', function() {
            var id  =   jQuery(this).attr('data-box');
            jQuery(this).hide();
            addBox8(id);
        })
    }
}
jQuery('div#example8 li').on('click', function() {
    var id  =   jQuery(this).attr('data-box');
    jQuery(this).hide();
    addBox8(id);
})

// REMOBVE BOX
jQuery('div#example8 div.box div.box-remove').on('click', function() {
    var id  =   jQuery(this).parent().attr('id');
    removeBox8(id);
});

function removeBox8(id) {
    if ( id ) {
        jQuery('div#example8 div#' + id).remove();
        jQuery('div#example8 li.' + id).show();
        maxShow8();
    } else {
        jQuery('div#example8 div.box div.box-remove').on('click', function() {
            var id  =   jQuery(this).parent().attr('id');
            removeBox8(id);
        });
    }
}

// MAX SHOW
function maxShow8() {
    var max     =   4;
    var count	=	0;

	jQuery('div#example8 div.box-count').each(function() {
		count			+=	1;
	});

    if ( count >= max ) {
		jQuery('div#example8 div.box.empty').hide();
	} else {
		jQuery('div#example8 div.box.empty').show();
	}
}

1

2

  • Box 3 hinzufügen
  • Box 4 hinzufügen

Syntax

Die Syntax sieht folgender Maße aus

$(selector, context).sortable(options);

Im folgenden findet Ihr die unterschiedlichen options;

Option Beschreibung
appendTo Diese Option gibt das Element an, in das das mit options.helper neu erstellte Element während der Zeit des Verschiebens eingefügt wird. Standardmäßig ist sein Wert parent.
axis Diese Option zeigt eine Bewegungsachse an („x“ ist horizontal, „y“ ist vertikal). Standardmäßig ist sein Wert false.
cancel Diese Option wird verwendet, um das Sortieren von Elementen zu verhindern, indem Sie auf eines der Auswahlelemente klicken. Standardmäßig ist der Wert „input,textarea,button,select,option“.
connectWith Diese Option ist ein Selektor, der ein anderes sortierbares Element identifiziert und das Elemente aus diesem sortierbaren Element akzeptieren kann. Dadurch können Elemente aus einer Liste in andere Listen verschoben werden, was eine häufige und nützliche Benutzerinteraktion ermöglicht. Ohne diese Angabe wird kein anderes Element verbunden. Das ist eine einseitige Beziehung. Standardmäßig ist sein Wert false.
containment Diese Option zeigt ein Element an, in dem die Verschiebung stattfindet. Das Element wird durch einen Selektor (nur das erste Element in der Liste wird berücksichtigt), ein DOM-Element oder die Zeichenkette „parent“ (übergeordnetes Element) oder „window“ (HTML-Seite) dargestellt.
cursor Gibt die Cursor-CSS-Eigenschaft an, wenn sich das Element bewegt. Es stellt die Form des Mauszeigers dar. Standardmäßig ist der Wert „auto„.
cursorAt Setzt den Offset des Dragging Helfers zum Mauszeiger. Koordinaten können als Hash mit einer Kombination aus einer oder zwei Tasten angegeben werden: oben, links, rechts, unten }. Standardmäßig ist sein Wert „false„.
delay Verzögerung in Millisekunden, nach der die erste Bewegung der Maus berücksichtigt wird. Die Verschiebung kann nach dieser Zeit beginnen. Standardmäßig ist der Wert „0“.
disabled Wenn diese Option auf true gesetzt ist, wird die sortierbare Funktionalität deaktiviert. Standardmäßig ist sein Wert false.
distance Anzahl der Pixel, die die Maus bewegt werden muss, bevor die Sortierung beginnt. Wenn angegeben, wird die Sortierung erst dann gestartet, wenn die Maus über die Entfernung gezogen wird. Standardmäßig ist der Wert „1“.
dropOnEmpty Diese Option ist auf false gesetzt, dann können Elemente aus dieser Sortierfunktion nicht auf eine leere Verbindungs-Sortierfunktion abgelegt werden. Standardmäßig ist sein Wert true.
forceHelperSize Wenn diese Option auf true gesetzt ist, wird der Helfer gezwungen, eine Größe zu haben. Standardmäßig ist sein Wert false.
forcePlaceholderSize Diese Option, wenn sie auf true gesetzt ist, berücksichtigt die Größe des Platzhalters, wenn ein Element verschoben wird. Diese Option ist nur sinnvoll, wenn options.placeholder initialisiert ist. Standardmäßig ist sein Wert false.
grid Diese Option ist ein Array[x, y], das die Anzahl der Pixel angibt, die das Sortierelement während der Verschiebung der Maus horizontal und vertikal bewegt. Standardmäßig ist sein Wert false.
handle Wenn angegeben, wird die Sortierung vom Anfang an eingeschränkt, es sei denn, die Mausbewegung erfolgt auf dem/den angegebenen Element(en). Standardmäßig ist sein Wert false.
helper Ermöglicht die Verwendung eines Hilfselements zum Ziehen der Anzeige. Standardmäßig ist der Wert original.
items Diese Option legt fest, welche Elemente innerhalb des DOM-Elements sortiert werden sollen. Standardmäßig ist sein Wert > *.
opacity Diese Option wird verwendet, um die Deckkraft des Helfers beim Sortieren zu definieren. Standardmäßig ist sein Wert false.
placeholder Diese Option wird verwendet, um Klassennamen zu vergeben, die auf den ansonsten weißen Bereich angewendet werden.
revert Diese Option entscheidet, ob die sortierbaren Elemente in einer glatten Animation an ihre neue Position zurückkehren sollen. Standardmäßig ist sein Wert false.
scroll Diese Option wird verwendet, um das Scrollen zu aktivieren. Wenn auf true gesetzt, scrollt die Seite, wenn sie an eine Kante kommt. Standardmäßig ist sein Wert true.
scrollSensitivity Diese Option gibt an, wie viele Pixel die Maus den sichtbaren Bereich verlassen muss, um ein Scrollen zu bewirken. Standardmäßig ist der Wert 20. Diese Option wird nur verwendet, wenn options.scroll auf true gesetzt ist.
scrollSpeed Diese Option gibt die Scrollgeschwindigkeit der Anzeige an, sobald das Scrollen beginnt. Standardmäßig ist der Wert 20.
tolerance Diese Option ist ein String, der angibt, in welchem Modus getestet werden soll, ob das zu verschiebende Element über einem anderen Element schwebt. Standardmäßig ist sein Wert „intersect„.
zIndex Diese Option stellt den z-Index für Element / Helfer beim Sortieren dar. Standardmäßig ist der Wert 1000.

Beispiele

Im folgenden findest Du einige Beispiele, wie man mit sortable die Reihenfolge von Elementen mit Drag and Drop verändern kann. Ebenso findest Du auch Beispiele in denen Elemente gelöscht und wieder hinzugefügt werden können.

Basic: Einfaches Drag & Drop Beispiel

Dies ist wohl das einfachste Beispiel und soll die Basics von sortable aufzeigen.

Keine Produkte gefunden.

  • HTML
  • JS
  • CSS

    

        

        

            

                
1

            

        

    


    

        

        

            

                
2

            

        

    


    

        

        

            

                
3

            

        

    


    

        

        

            

                
4

            

        

    


jQuery( function() {
    jQuery( "div#example1" ).sortable();
});
/*-----------*/
/* SOORTABLE */
/*-----------*/
div.sortable {
    padding: 24px 12px;
    position: relative;
    max-width: 100%;
    height: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
div.sortable div.box {
	width: 25%;
	max-width: 25%;
	-ms-flex-preferred-size: 0;
	    flex-basis: 0;
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	border-radius: 4px;
	position: relative;
	padding-left: 12px;
	padding-right: 12px;
}
div.sortable div.box div.box-content {
    background: #fff;
    -webkit-box-shadow: 0 0 0.875rem 0 rgba(53, 64, 82, 0.05);
            box-shadow: 0 0 0.875rem 0 rgba(53, 64, 82, 0.05);
    border-radius: 4px;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
div.sortable div.box.ui-sortable-helper div.box-content {
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
	-webkit-box-shadow: 0 0 0.875rem 0 rgba(53, 64, 82, 0.3);
	        box-shadow: 0 0 0.875rem 0 rgba(53, 64, 82, 0.3);
	opacity: 0.5;
}
div.sortable div.box div.box-placeholder {
	margin-top: 50%;
}
div.sortable div.box div.box-content {
	width: calc(100% - 24px);
	height: 100%;
    position: absolute;
    top: 0;
    left: 12px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 0;
	z-index: 9;
}
div.sortable div.box div.box-content div.inner h2 {
	padding: 0;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

1

2

3

4

Zunächst erstellst Du ein Eltern-Element. In meinem Beispiel ist es <div id="example1"></div>. In dieses Element fügst du die zu ordnen Elemente ein. Das sollte dann in etwa so aussehen:


    
1

    
2

    
3

    
4

Anschließend fügst Du den folgenden javascript hinzu und die Sortierung per Drag & Drop sollte funktionieren.

jQuery( function() {
    jQuery( "div#example1" ).sortable();
});

Placeholder hinzufügen

Dieses Beispiel basiert auf dem ersten Beispiel und ist etwas angepasst. Ich habe es jedoch durch einen Placeholder erweitert. Dieser zeigt die neue Position des zu verschiebenden Elements an.

Keine Produkte gefunden.

  • HTML
  • JS
  • CSS

    

        

        

            

                
1

            

        

    


    

        

        

            

                
2

            

        

    


    

        

        

            

                
3

            

        

    


    

        

        

            

                
4

            

        

    


jQuery( function() {
    jQuery( "div#example2" ).sortable({
		placeholder	:	'box placeholder',
    });
});
/*------------------*/
/* PLACEHOLDER BOX */
/*------------------*/
div.sortable div.box.placeholder {
	border: 2px dashed #78AD80;
}

1

2

3

4

Die Option placeholder fügt automatisch ein neues Element hinzu (<div class="box placeholder"></div>). Dieses Element kannst Du anschließend in der CSS-Datei stylen.

jQuery( function() {
    jQuery( "div#example2" ).sortable({
		placeholder	:	'box placeholder',
    });
});

Fixed Element

Die rote Box in diesem Beispiel ist ein fixiertes Element, welches nicht verschoben werden kann. Es kann auch kein anderes Element hinter dieses Element gepackt werden.

  • HTML
  • JS
  • CSS

    

        

        

            

                
1

            

        

    


    

        

        

            

                
2

            

        

    


    

        

        

            

                
3

            

        

    


    

        

        

            

                
Fix

            

        

    


jQuery( function() {
    jQuery( "div#example3" ).sortable({
		placeholder	:	'box placeholder',
        fixed		:	'div.box.fixed',
		items		:	'div.box:not(.fixed)',
    });
});
/*-----------*/
/* FIXED BOX */
/*-----------*/
div.sortable div.box.fixed div.box-content {
    background: #ef5c74;
}

1

2

3

Fix

Wie im folgenden Code zu sehen, wird die function einfach nur mit den Optionen fixed und items erweitert.

  • fixed: Klassennamen des zu fixenden Elements angeben
  • items: Hier wird definiert, welche Elemente überhaupt per Drag & Drop verschoben werden dürfen.
jQuery( function() {
    jQuery( "div#example3" ).sortable({
		placeholder	:	'box placeholder',
        fixed		:	'div.box.fixed',
		items		:	'div.box:not(.fixed)',
    });
});

Container hinzufügen – Sortable unendliches Scrollen verhindern

Wer im vorherigen Beispiel ein Element nach ganz rechts bewegt hat, der wird festgestellt haben, dass dies ein unendliches Scrollen verursacht. Natürlich nicht schön. Um dies zu verhindern kann man due function durch die option containment erweitern. In dieser gibst du das übergeordnete Element an, in welchem sich die sortable Aktion ausführen lassen darf. Und via css gibst du der Klasse overflow: hidden an.

  • HTML
  • JS

    

        

        

            

                
1

            

        

    


    

        

        

            

                
2

            

        

    


    

        

        

            

                
3

            

        

    


    

        

        

            

                
4

            

        

    


jQuery( function() {
    jQuery( "div#example4" ).sortable({
		placeholder	:	'box placeholder',
		containment	:	'article.single',
    });
});

1

2

3

4

Boxen entfernen / löschen

In diesem scrollable Beispiel kannst Du Elemente entfernen. Dazu müsst Ihr einige Zeilen javascript schreiben oder kopieren.

  • HTML
  • JS
  • CSS

    

        

        

        

            

                
1

            

        

    


    

        

        

        

            

                
2

            

        

    


    

        

        

        

            

                
3

            

        

    


    

        

        

        

            

                
4

            

        

    


jQuery( function() {
    jQuery( "div#example5" ).sortable({
		placeholder	:	'box placeholder',
		containment	:	'article.single',
    });
});

// REMOVE BOX
jQuery('div#example5 div.box div.box-remove').on('click', function() {
    var id  =   jQuery(this).parent().attr('id');
    removeBox5(id);
});

function removeBox5(id) {
	jQuery('div#example5 div#' + id).remove();
}
/*-------------*/
/* REMOVE BOX */
/*-------------*/
div.sortable div.box div.box-remove {
    position: absolute;
	right: 28px;
	top: 16px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	z-index: 99;
}
div.sortable div.box div.box-remove::before,
div.sortable div.box div.box-remove::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	background: #eee;
	top: 0;
	left: 50%;
	border-radius: 2px;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
div.sortable div.box div.box-remove::before {
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
div.sortable div.box div.box-remove::after {
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
div.sortable div.box div.box-remove:hover::before,
div.sortable div.box div.box-remove:hover::after {
	background: #4B5055;
}

1

2

3

4

Zunächst einmal fügt Ihr den Boxen ein neues Element hinzu. In meinem Beispiel habe ich sie wie folgt benannt:

Diese könnt Ihr nach belieben stylen. Anschließend habe ich eine function erstellt, die auf ein click reagiert und das übergeordnete Element löscht, in dem sich <div class="box-remove"></div> befindet.

jQuery('div#example5 div.box div.box-remove').on('click', function() {
    var id  =   jQuery(this).parent().attr('id');
    removeBox(id);
});

function removeBox(id) {
	jQuery('div#example5 div#' + id).remove();
}

Boxen entfernen und hinzufügen

Nun habe ich die Boxen entfernt. Nun möchte ich aber auch neue Boxen hinzufügen. In diesem Beispiel siehst Du die Funktionsweise, wie man Boxen löschen, hinzufügen und trotzdem via Drag & Drop sortieren kann.

  • HTML
  • JS
  • CSS

    

        

            

                

                    
    
                        
  • Box 1 hinzufügen
    • 
                        
  • Box 2 hinzufügen
    • 
                        
  • Box 3 hinzufügen
    • 
                        
  • Box 4 hinzufügen
    • 
                    

                

            

        

    


// DRAG & DROP
jQuery( function() {
    jQuery( "div#example6" ).sortable({
		placeholder	:	'box placeholder',
        fixed		:	'div.box.empty',
		items		:	'div.box:not(.empty)',
    });
});

// OPEN SELECT
jQuery('div#example6 div.box.empty div.select').on('click', function() {
    jQuery(this).toggleClass('open');
});

jQuery('body').click(function(e) {
    if (jQuery(e.target).closest('div#example6 div.box.empty div.select').length === 0) {
        jQuery('div#example6 div.box.empty div.select').removeClass('open');
    }
});

// ADD BOX
function addBox6( id ) {
	if ( id ) {
        var html    =   '
' + id + '
';
		jQuery(html).insertBefore( 'div#example6 div.box.empty' );
        removeBox6();
	}
}
jQuery('div#example6 li').on('click', function() {
    var id  =   jQuery(this).attr('data-box');
    jQuery(this).hide();
    addBox6(id);
})

// REMOBVE BOX
jQuery('div#example6 div.box div.box-remove').on('click', function() {
    var id  =   jQuery(this).parent().attr('id');
    removeBox6(id);
});

function removeBox6(id) {
    if ( id ) {
        jQuery('div#example6 div#' + id).remove();
        jQuery('div#example6 li.' + id).show();
    } else {
        jQuery('div#example6 div.box div.box-remove').on('click', function() {
            var id  =   jQuery(this).parent().attr('id');
            removeBox6(id);
        });
    }
}
/*------------*/
/* EMPTY BOX */
/*------------*/
div.sortable div.box.empty div.box-content {
	border: 2px dashed #adb5bd;
	border-radius: 4px;
}
div.sortable div.box.empty div.select {
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	border-radius: 4px;
}
div.sortable div.box.empty div.select:hover {
	background: #fff;
}
div.sortable div.box.empty div.select div.chooser {
	width: 24px;
	height: 24px;
	display: table;
	margin: 0 auto;
	cursor: pointer;
	position: relative;
}
div.sortable div.box.empty div.select div.chooser::before,
div.sortable div.box.empty div.select div.chooser::after {
	content: '';
	position: absolute;
	background: #adb5bd;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
div.sortable div.box.empty div.select:hover div.chooser::before,
div.sortable div.box.empty div.select:hover div.chooser::after {
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
}
div.sortable div.box.empty div.select div.chooser::before {
	top: 50%;
	margin-top: -1px;
	width: 100%;
	height: 2px;
}
div.sortable div.box.empty div.select div.chooser::after {
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	top: 0;
}
div.sortable div.box.empty div.select.open div.chooser::after {
	top: 50%;
	height: 2px;
	margin-top: -1px;
}
div.sortable div.box.empty div.select ul {
	position: absolute;
	left: 50%;
	top: 24px;
	background: #fff;
	width: 200px;
	font-size: 14px;
	padding: 0;
	margin-left: -100px;
	z-index: 99;
	border: 1px solid #eee;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.15);
	        box-shadow: 0 0 20px rgba(0,0,0,0.15);
	border-radius: 4px;
	overflow: hidden;
	opacity: 0;
	display: none;
}
div.sortable div.box.empty div.select.open ul {
	-webkit-animation-name: showSelectUl;
	        animation-name: showSelectUl;
	-webkit-animation-delay: 0.1s;
	        animation-delay: 0.1s;
	-webkit-animation-duration: 0.2s;
	        animation-duration: 0.2s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	display: block;
}
@-webkit-keyframes showSelectUl {
	0% {
		top: 24px;
		opacity: 0;
	} 100% {
		top: 32px;
		opacity: 1;
	}
}
@keyframes showSelectUl {
	0% {
		top: 24px;
		opacity: 0;
	} 100% {
		top: 32px;
		opacity: 1;
	}
}
div.sortable div.box.empty div.select ul li {
	list-style: none;
	padding: 8px 16px 8px 40px;
	cursor: pointer;
	color: #96959b;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	position: relative;
}
div.sortable div.box.empty div.select ul li:hover {
	background: #f5f5f5;
	color: #4B5055;
}
div.sortable div.box.empty div.select ul li i {
	margin-right: 8px;
	position: absolute;
	left: 16px;
	top: 12px;
}
div.sortable div.box.empty div.select ul li small {
	float: right;
	opacity: 0;
	margin-right: -8px;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
div.sortable div.box.empty div.select ul li:hover small {
	opacity: 1;
	margin-right: 0;
}
  • Box 1 hinzufügen
  • Box 2 hinzufügen
  • Box 3 hinzufügen
  • Box 4 hinzufügen

Zunächst einmal habe ich ein leere Box mit einem Select Feld erstellt. In diesem habe ich vier Auswahlelemente gepackt, die später per Klick als Box angezeigt werden sollen.


        

            

                

                    
    
                        
  • Box 1 hinzufügen
    • 
                        
  • Box 2 hinzufügen
    • 
                        
  • Box 3 hinzufügen
    • 
                        
  • Box 4 hinzufügen
    •

Nun muss das Dropdown Menü auch aufklappen. Dazu habe ich folgenden javascript geschrieben, welches auf einen click reagiert und schließt, wenn man irgendwo im Body klickt.

// OPEN SELECT
jQuery('div#example6 div.box.empty div.select').on('click', function() {
    jQuery(this).toggleClass('open');
});

jQuery('body').click(function(e) {
    if (jQuery(e.target).closest('div#example6 div.box.empty div.select').length === 0) {
        jQuery('div#example6 div.box.empty div.select').removeClass('open');
    }
});

Jetzt, wo Du das Dropdown öffnen kannst, benötigst Du eine neue function die auf den Click auf eines der Auswahlmöglichkeiten reagiert. Ich habe sie in meinen Beispiel addBox() genannt. Mit einen Klick auf ein li-Element wird dieses erst einmal durch .hide() ausgeblendet und ich übergebe der function addBox() die ID, die ich aus dem Attribut data-box gesammelt habe.

In der Funktion addBox() baue ich zunächst einmal in der Variable html die Box zusammen, welche angezeigt werden soll. Dann füge ich das html vor meiner Empty Box ein. Die Empty Box ist die Box, welches das Dropdown Menü beherbergt. 

// ADD BOX
function addBox( id ) {
	if ( id ) {
        var html    =   '
' + id + '
';
		jQuery(html).insertBefore( 'div#example6 div.box.empty' );
        removeBox();
	}
}
jQuery('div#example6 li').on('click', function() {
    var id  =   jQuery(this).attr('data-box');
    jQuery(this).hide();
    addBox(id);
})

Da beim Aufruf der addBox() Funktion neue Elemente dem DOM hinzugefügt werden, die das javascript vorher nicht kannte, musst Du die removeBox() Funktion noch etwas anpassen und zudem beim erstellen einer neuen Box immer wieder neu mit aufrufen.

// REMOBVE BOX
jQuery('div#example6 div.box div.box-remove').on('click', function() {
    var id  =   jQuery(this).parent().attr('id');
    removeBox(id);
});

function removeBox(id) {
    if ( id ) {
        jQuery('div#example6 div#' + id).remove();
        jQuery('div#example6 li.' + id).show();
    } else {
        jQuery('div#example6 div.box div.box-remove').on('click', function() {
            var id  =   jQuery(this).parent().attr('id');
            removeBox(id);
        });
    }
}

Maximale Anzahl festlegen

Du kannst das vorherige Beispiel noch erweitern, indem du vorab definierst, wie viele Elemente überhaupt erstellt werden dürfen. In meinem Beispiel habe ich das Limit auf 2 gesetzt.

Limit = 2

  • HTML
  • JS

    

        

            

                

                    
    
                        
  • Box 1 hinzufügen
    • 
                        
  • Box 2 hinzufügen
    • 
                        
  • Box 3 hinzufügen
    • 
                        
  • Box 4 hinzufügen
    • 
                    

                

            

        

    


// DRAG & DROP
jQuery( function() {
    jQuery( "div#example7" ).sortable({
		placeholder	:	'box placeholder',
        fixed		:	'div.box.empty',
		items		:	'div.box:not(.empty)',
    });
});

// OPEN SELECT
jQuery('div#example7 div.box.empty div.select').on('click', function() {
    jQuery(this).toggleClass('open');
});

jQuery('body').click(function(e) {
    if (jQuery(e.target).closest('div#example7 div.box.empty div.select').length === 0) {
        jQuery('div#example7 div.box.empty div.select').removeClass('open');
    }
});

// ADD BOX
function addBox( id ) {
	if ( id ) {
        var html    =   '
' + id + '
';
		jQuery(html).insertBefore( 'div#example7 div.box.empty' );
        removeBox();
        maxShow();
	}
}
jQuery('div#example7 li').on('click', function() {
    var id  =   jQuery(this).attr('data-box');
    jQuery(this).hide();
    addBox(id);
})

// REMOBVE BOX
jQuery('div#example7 div.box div.box-remove').on('click', function() {
    var id  =   jQuery(this).parent().attr('id');
    removeBox(id);
});

function removeBox(id) {
    if ( id ) {
        jQuery('div#example7 div#' + id).remove();
        jQuery('div#example7 li.' + id).show();
        maxShow();
    } else {
        jQuery('div#example7 div.box div.box-remove').on('click', function() {
            var id  =   jQuery(this).parent().attr('id');
            removeBox(id);
        });
    }
}

// MAX SHOW
function maxShow() {
    var max     =   2;
    var count	=	0;

	jQuery('div#example7 div.box-count').each(function() {
		count			+=	1;
	});

    if ( count >= max ) {
		jQuery('div#example7 div.box.empty').hide();
	} else {
		jQuery('div#example7 div.box.empty').show();
	}
}
  • Box 1 hinzufügen
  • Box 2 hinzufügen
  • Box 3 hinzufügen
  • Box 4 hinzufügen

Damit die Box mit dem Dropdown Menü bei 2 „normalen“ Boxen verschwindet, musst Du eine neue Funktion erstellen und diese in den Aufruf der addBox() und removeBox() hinzufügen. In dieser Funktion zählst Du dann mit each alle Boxen, die die Klasse box-count haben und speicherst die Anzahl in der Variablen count. Danach wird abgefragt, ob der Count größer gleich 2 ist. Wenn ja, dann füge .hide() an, ansonsten .show().

// MAX SHOW
function maxShow() {
    var max     =   2;
    var count	=	0;

	jQuery('div#example7 div.box-count').each(function() {
		count			+=	1;
	});

    if ( count >= max ) {
		jQuery('div#example7 div.box.empty').hide();
	} else {
		jQuery('div#example7 div.box.empty').show();
	}
}

Ich hoffe Dir hat meine Anleitung und meine Beispiele gefallen. Wenn ja, dann würde ich mich über ein Kommentar oder Like freuen. Das gleiche gilt natürlich für Fragen oder Anregungen.

Verfasst am 19.09.2019 Update 24.03.2023

revilodesign oli

4 Kommentare

Schreibe ein Kommentar zu jQuery Sortable Drag & Drop Anleitung – hinzufügen, löschen, Reihenfolge verändern

  1. avatar jeppoJeppo sagt:
    26. Februar 2020 um 16:56 Uhr

    Super gemacht, danke dir!!
    Ich habe mich lange mit dem Thema beschäftigt, schade dass ich erste heute das gefunden habe 🙂

    Antworten
  2. avatar stefanStefan sagt:
    18. August 2020 um 9:07 Uhr

    Einfache aber verständlicher Erklärung, mich würde interessieren wie es bei verschachteln aussieht, wäre vielleicht ein Anreiz für einen weiteren Artikel:)

    Antworten
  3. avatar cj82rnkcj82rnk sagt:
    15. September 2020 um 21:24 Uhr

    Coole Sache
    Wie kriegt man die 4 Kisten aber untereinander ??

    Antworten
    • avatar adminadmin sagt:
      16. September 2020 um 15:28 Uhr

      Hey cj82rnk,

      relativ einfach. Du gibst dem Eltern-Element „flex-wrap: wrap“ und setzt bei den Kinder-Elemente eine „min-width: 100%“. Dann sollten die Boxen umbrechen und untereinander erscheinen. Du kannst dem Eltern-Element aber auch „flex-direction: column“ anfügen. Das sollte auch funktionieren. Ich hoffe ich konnte dir Helfen

      LG Oli

      Antworten

Hinterlasse ein Kommentar zum Beitrag "jQuery Sortable Drag & Drop Anleitung – hinzufügen, löschen, Reihenfolge verändern"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Letzte Aktualisierung am 2024-11-21 / Affiliate Links / Bilder von der Amazon Product Advertising API

Follow Me

doch mal auf Instagram