JQuery Sortable ConnectWith non funziona

Question

Ho due elenchi ordinabili. Voglio collegare questi elenchi in modo da poter spostare elementi da una lista all'altra in entrambe le direzioni. Io uso connectWith ordinabile, ma ancora non posso spostare gli elementi della lista da uno a un altro elenco.

Inoltre, sono in grado di spostare elementi da un luogo a un altro, ma nella stessa lista.

Ecco il codice:

<div class="category-container" data-id="1"> 
    <div class="category-header" data-id="1"> 
    </div> 
    <ul class="list-items ui-sortable"> 
     <li class="item" data-id="3"> 
     <li class="item" data-id="43"> 
     <li class="item" data-id="28"> 
     <li class="item" data-id="24"> 
     <li class="item" data-id="21"> 
     <li class="item new" data-id="0"> 
    </ul> 
</div> 
<div class="category-container" data-id="2"> 
    <div class="category-header" data-id="2"> 
    </div> 
    <ul class="list-items ui-sortable"> 
     <li class="item" data-id="17"> 
     <li class="item" data-id="8"> 
     <li class="item" data-id="9"> 
     <li class="item new" data-id="0"> 
    </ul> 
</div> 

e jQuery:

$(".list-items").sortable({ 
      connectWith: '.list-items', 
      items: "li:not(.item.new)", 
      placeholder: 'place-holder', 
      scroll: false, 
      tolerance: "pointer" 
}).disableSelection(); 

Non posso scoprire qual è il problema.

Qualcuno può aiutarmi?

Grazie

Answer 1

Ho capito.

Il problema era la proprietà float dell'elenco. Connettività ordinabileCon funzionamento con css float.

Sortable connectWith Bug

Answer 2

Beh, per me la lista appena funziona come previsto .. Verificare questo: http://jsfiddle.net/GSA2A/2/

Inoltre si dovrebbe scrivere Valid HTML, chiudere i tag almeno .. maggior parte dei browser in grado di gestire mancanti chiusi li-elements a seconda del doctype che stai utilizzando.

È anche possibile utilizzare:

$('#list1, list2').sortable({....... 

Sembra meglio di me e più logico avere la funzione ordinabile utilizzato su ID e la connectWith su una classe che unisce tali elenchi.

Answer 3

sto assegnando sia ul ad un id

<ul id="list"> 
 
    <li>School</li> 
 
    <li>Name</li> 
 
    <li>Roll</li> 
 
</ul> 
 
<ul id="thi"> 
 
    <li>School</li> 
 
    <li>Name</li> 
 
    <li>Roll</li> 
 
</ul> 
 
\t 
 
<div id="fdk"> 
 
</div>

e nel file di jQuery ottengo sia id e utilizzare ordinabile(); applicare parametri diversi e che sta funzionando per me è possibile utilizzare questo codice che sto utilizzando jQuery-3.1.1.js, si tenta di aggiungere il contenimento: 'documento'

$('#list, #thi').sortable({ 
 
    containment:'document', 
 
    tolerance:'pointer', 
 
    cursor:'pointer', 
 
    revert:true, 
 
    opacity:0.4, 
 
    connectWith:'#list,#thi', 
 
    update: function() { 
 
     // alert('f'); 
 
     content = $(this).text(); 
 
     $('#fdk').text(content); 
 
    } 
 
});

Answer 4

ho appena vorrei condividere qualcosa che ho appena realizzato e forse può aiutare qualcuno.

L'elemento che riceverà un elemento (div/UL) da un altro elenco/tabella deve avere "spazio" sufficiente per ricevere (larghezza e altezza) e visualizzare il nuovo elemento.