Trattare con sovrapposizione liste jQuery ordinabili
https://stackoverflow.com/questions/4092817
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Questo è un po 'un problema oscuro, ma sto usando jQuery Sortables e cercando di ottenere due liste collegate che lavorano insieme piacevolmente quando si è posizionato come fixed. Tutto funziona bene fino a quando si scorre la pagina di un po 'in modo tale che le due liste finiscono posizionato su uno sopra l'altro. Poi le liste sembrano confondersi su quale uno dovrebbe essere che riceve l'articolo che viene trascinato, il che significa che si ottiene un mucchio alle oscillazioni accadendo come appare / scompare in ogni lista.
Sembra che il problema è che entrambe le liste sono la gestione degli eventi del mouse / ordinamento in quanto l'essere oggetto trascinato è tecnicamente su entrambe le liste, ma quello che voglio è quello di avere l'elenco sovrapposto (cioè la position: fixed uno) ingoiare gli eventi in modo che l'elenco principale alla base non tenta di ricevere l'oggetto.
Ecco l'esempio di codice minima:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style type="text/css">
ul { list-style-type: none; padding: 0; float: left; }
li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; }
#overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; }
#overlayed li { width: 50px; float: left; }
</style>
<script type="text/javascript">
$(function() {
$("ul").sortable({ connectWith: "ul", opacity: 0.6 }).disableSelection();
});
</script>
</head>
<body>
<div id="overlayed">
<ul>
<li>Item X</li>
<li>Item Y</li>
<li>Item Z</li>
</ul>
</div>
<br/><br/><br/><br/><br/>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
</body>
</html>
Quindi la domanda è: come posso risolvere il problema?
Soluzione
Ho finito per fissare questo problema estendendo alla funzione integrata di sortable per creare un fixedSortable che rileva e ignora selettivamente in bilico su liste quando c'è una sovrapposizione in atto. Per i miei scopi, ho appena codificato duro le regole, dal momento che adatta alle mie esigenze vincoli / ora, ma si dovrebbe essere in grado di renderlo completamente generico senza troppo sforzo.
In primo luogo ecco il codice (spiegazione di seguito):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style type="text/css">
ul { list-style-type: none; padding: 0; float: left; }
li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; }
#overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; }
#overlayed li { width: 50px; float: left; }
</style>
<script type="text/javascript">
(function ($, undefined) {
$.widget("ui.fixedSortable", $.ui.sortable, {
_init: function () {
this.element.data("sortable", this.element.data("fixedSortable"));
return $.ui.sortable.prototype._init.apply(this, arguments);
},
_create:function() {
var result = $.ui.sortable.prototype._create.apply(this, arguments);
this.containerCache.sortable = this;
return result;
},
_intersectsWithPointer: function (item) {
//This line....
if (item.instance.element.hasClass("main-list") && this.positionAbs.top + this.offset.click.top < $(window).scrollTop() + 87) {
return false;
}
return $.ui.sortable.prototype._intersectsWithPointer.apply(this, arguments);
},
_intersectsWith: function(containerCache) {
//Also this line....
if (containerCache.sortable.element.hasClass("main-list") && this.positionAbs.top + this.offset.click.top < $(window).scrollTop() + 87) {
return false;
}
return $.ui.sortable.prototype._intersectsWith.apply(this, arguments);
}
});
})(jQuery);
$(function() {
$("ul").fixedSortable({ connectWith: "ul", opacity: 0.6 }).disableSelection();
});
</script>
</head>
<body>
<div id="overlayed">
<ul>
<li>Item X</li>
<li>Item Y</li>
<li>Item Z</li>
</ul>
</div>
<br/><br/><br/><br/><br/>
<ul class="main-list" >
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
</body>
</html>
Se adattare da soli, avrete bisogno di cambiare le due righe di commento segnate sopra. Fondamentalmente il if dovrebbero restituiscono true (e quindi restituire false) se l'essere oggetto aleggiava (item.instance.element e containerCache.sortable.element) è non la sovrapposizione e l'evento (this) sta avvenendo all'interno dei limiti della sovrapposizione . In questo modo la lista principale non riceve gli eventi nella posizione della pagina in cui la sovrapposizione è. Quindi, in questo codice lista principale non riceve alcun evento se si verificano nella top 87 pixel dello schermo, dato che è dove la mia sovrapposizione fisso era (che non è abbastanza preciso in questo dumbed giù esempio, ma si spera abbia ancora senso ).
Altri suggerimenti
I implementata la modifica ordinabile perché abbia lo z-index in considerazione.
Si veda la forchetta qui: https://github.com/david04/jquery-ui / commit / feaf94ebabacee4d11b5e98c412d795d68ca9d51 (10 righe di codice, molto semplice cambiamento)
sarà necessario aggiungere l'opzione compareZIndex=true quando si chiama sortable.
Questo è il bug che credo state incontrando, e la correzione è molto più semplice:
mi sono imbattuto in questo problema su una pagina in cui ho una lista verticalmente sopra un secondo elenco. Anche se di overflow è impostato su nascosto, l'overflow invisibile della top list è ancora bloccando la mossa nel corso dell'evento per la lista sottostante (questo può essere confermata impostando overflow per auto nella top list per aiutare a visualizzare la sovrapposizione). E 'un problema di z-index.
La mia difficoltà è stato quello di inserire questo codice in caso di arresto ordinabile:
//expliclty hide the overflow items
$('.topList .item:gt(5)').hide();
$('.topeList .item:first').show();
Quello che sto facendo qui si nasconde in modo esplicito gli elementi della lista in alto, lasciando solo i primi 5 in modo visibile che non v'è alcuna compensazione sovrapposizione tra la parte superiore e la lista in basso DOM.
