Weiß jemand wie man jQuery UI auswählbar und sortierbar kombiniert? Dieses Skript: http://nicolas.rudas.info/jquery/selectables_sortables/ funktioniert nicht in Chrome und es hat auch Plugin-Änderungen.jQuery UI sortierbar & auswählbar
Antwort
gefunden Nur this sehr einfache Lösung von rdworth:
CSS:
ul { width: 300px; list-style: none; margin: 0; padding: 0; }
li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
.ui-selecting { background: #eee; }
.ui-selecting .handle { background: #ddd; }
.ui-selected { background: #def; }
.ui-selected .handle { background: #cde; }
HTML:
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Javascript:
$("#list")
.sortable({ handle: ".handle" })
.selectable({ filter: "li", cancel: ".handle" })
.find("li")
.addClass("ui-corner-all")
.prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>");
Siehe auch: this Geige.
Awesome finden. Vielen Dank. –
Das funktioniert ziemlich gut.Ich musste diese Optionen an selectable übergeben, so dass die Handles nicht als separate auswählbare Objekte behandelt wurden, und beim Ziehen keine Auswahl gestartet wurde: '{filter: 'li', cancel: '.handle'}' – Nick
@Nick: hinzugefügt deinen Vorschlag – mhu
Das ist so viel wie ich u geben kann :) aber die Idee ist da. sein nicht alllll vollständig, aber hoffentlich kann u etwa mit den Werten spielen und sehen, wie es von dort geht :)
Teil meines jQuery Basis-Arsenal folgendes umfasst, wie es ist in der Regel ärgerlich, wenn Sie etwas ziehen gehen und Ende Auswählen von Text statt ...
// disables text selection on sortable, draggable items
$(".sortable").sortable();
$(".sortable").disableSelection();
Nicht sicher, ob Sie nur den „disable“ Flip können zu „aktivieren“, aber es ist mein $ .02. Ohne es aber zu versuchen .. gesunder Menschenverstand legt nahe, dass Sie möglicherweise einen inaktiven Abschnitt innerhalb desselben "Gruppen" -Elements definieren müssen, um einen "Griff" für die Ziehaktion bereitzustellen ... oder andernfalls könnten diese Klicks unnachgiebig als die Absicht wählen/bearbeiten ...
Versuchen Sie dies. Sie können Ctrl + Click
für Multi-Auswahl und
Bitte fügen Sie die relevanten Teile des Codes in die Antwort selbst ... –
Sortierung Wenn Sie mehrere Elemente auswählen möchten, und BEWEGEN SIE ALLE in eine andere Liste, diese fiddle funktioniert gut:
HTML:
<meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<ul id="album" class="connectedSortable">
<li id="li1"><div>1- First</div></li>
<li id="li2"><div>2- Second</div></li>
<li id="li3"><div>3- Third</div></li>
<li id="li4"><div>4- Fourth</div></li>
<li id="li5"><div>5- Fifth</div></li>
<li id="li6"><div>6- Sixth</div></li>
<li id="li7"><div>7- Seventh</div></li>
<li id="li8"><div>8- Eighth</div></li>
</ul>
<ul id="album2" class="connectedSortable">
<li id="li1"><div>1- 1</div></li>
<li id="li2"><div>2- 2</div></li>
<li id="li3"><div>3- 3</div></li>
<li id="li4"><div>4- 4</div></li>
<li id="li5"><div>5- 5</div></li>
<li id="li6"><div>6- 6</div></li>
<li id="li7"><div>7- 7</div></li>
<li id="li8"><div>8- 8</div></li>
</ul>
<div id="anotheralbum" class="connectedSortable">
another album - no style for the lists inside here
</div>
<br style="clear:both">
</body>
Javascript:
<script>
$(function() {
//
$('body').selectable({
filter: 'li'
//filter: '#album2 > li'
});
/*
Since the sortable seems unable to move more than one object at a
time, we'll do this:
The LIs should act only as wrappers for DIVs.
When sorting a LI, move all the DIVs that are children of selected
LIs to inside the sorting LI (this will make them move together);
but before doing that, save inside the DIVs a reference to their
respective original parents, so we can restore them later.
When the user drop the sorting, restore the DIVs to their original
parent LIs and place those LIs right after the just-dropped LI.
Voilá!
Tip: doesn't work so great if you try to stick the LIs inside the LI
*/
$('.connectedSortable').sortable({
connectWith: ".connectedSortable",
delay: 100,
start: function(e, ui) {
var topleft = 0;
// if the current sorting LI is not selected, select
$(ui.item).addClass('ui-selected');
$('.ui-selected div').each(function() {
// save reference to original parent
var originalParent = $(this).parent()[0];
$(this).data('origin', originalParent);
// position each DIV in cascade
$(this).css('position', 'absolute');
$(this).css('top', topleft);
$(this).css('left', topleft);
topleft += 20;
}).appendTo(ui.item); // glue them all inside current sorting LI
},
stop: function(e, ui) {
$(ui.item).children().each(function() {
// restore all the DIVs in the sorting LI to their original parents
var originalParent = $(this).data('origin');
$(this).appendTo(originalParent);
// remove the cascade positioning
$(this).css('position', '');
$(this).css('top', '');
$(this).css('left', '');
});
// put the selected LIs after the just-dropped sorting LI
$('#album .ui-selected').insertAfter(ui.item);
// put the selected LIs after the just-dropped sorting LI
$('#album2 .ui-selected').insertAfter(ui.item);
}
});
//
});
</script>
CSS:
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#album {
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
}
#album2 {
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
}
#album li {
float: left;
margin: 5px;
}
#album2 li {
float: left;
margin: 5px;
}
#album div {
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
}
#album2 div {
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
}
#album .ui-sortable-placeholder {
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
}
#album2 .ui-sortable-placeholder {
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
}
#album .ui-selecting div,
#album .ui-selected div {
background-color: #3C6;
}
#album2 .ui-selecting div,
#album2 .ui-selected div {
background-color: #3C6;
}
#anotheralbum {
list-style: none;
float: left;
width: 20%;
height: 800px;
border: 1px solid blue;
}
</style>
Dieses aus dem Beispiel bei http://www.pieromori.com.br/snippets/sortable_with_selectable.html dank Piero Mori geändert wurde.
- 1. jQuery UI auswählbar und Bildlaufleiste
- 2. jquery ui wählbar und sortierbar kombiniert
- 3. JQuery UI sortierbar Anzeigen Sortierreihenfolge
- 4. jQuery UI Sortierbar - Seitwärtsbewegung deaktivieren
- 5. jquery ui Drag Drop + sortierbar
- 6. JQuery sortierbar verschachtelt sortierbar divs
- 7. jquery ui sortierbar - klicken Scrollbar bricht es
- 8. JQuery UI sortierbar - ConnectWith - Eine Spalte deaktivieren
- 9. jquery ui sortierbar ('refresh') funktioniert nicht!
- 10. Wie sortiere ich eine JQuery UI sortierbar?
- 11. Jquery UI kombinierbar sortierbar und ziehbar
- 12. jQuery UI Sortierbar und Bootstrap-Gitter
- 13. Jquery ui sortierbar serialisieren funktioniert nicht
- 14. Platzhalterhöhe mit jQuery-UI steuern Sortierbar
- 15. jQuery UI Sortierbar - Momentan verschobene div ID
- 16. jquery ui sortierbar, bootstrap Akkordeon, .panel-heading
- 17. jQuery UI Sortierbar und Google Gadgets
- 18. Jquery UI Sortierbar - Sortiere den Artikel
- 19. jquery ui sortierbar, scroll funktioniert nicht
- 20. jquery ui sortierbar connecwith von Kindern geben
- 21. Jquery auswählbar scrollbar
- 22. jquery Sortable/auswählbar: Filterung Kind steuert
- 23. Rails und Jquery sortierbar
- 24. jQuery UI Auswählbar - Auswahl des ausgewählten Elements beim Klicken aufheben
- 25. Mit jQuery UI auswählbar, wie finden Sie ausgewählte Artikel?
- 26. Detect Drop mit jQuery sortierbar
- 27. Sortierbar mit jQuery und Ajax
- 28. Auswählbar und un/Alle auswählen (jQuery)
- 29. jQuery UI: Ziehen Sie innerhalb von Akkordeon nach außen sortierbar
- 30. jquery ui sortierbar disable für einen li item
Ich habe es getan, aber nicht mit sortierbaren und wählbar, aufgrund einiger Urheberrechtsfragen ich cnt geben Sie den Code :), aber ich werde Ihnen Anweisungen zeigen, wie :) – Val