KendoUI collega trascinabile a ordinabile

Question

C'è un modo per collegare l'elemento trascinabile KendoUI da aggiungere all'elenco di ordinabili KendoUI come nell'esempio con jQueryUI qui: http://jqueryui.com/draggable/#sortable. Sto sbattendo la testa per un giorno con questo e sta diventando mediamente divertente. Devo passare a jQueryUI?

Answer 1

Hai controllato KendoUI Sortable widget. In realtà è piuttosto facile da usare.

Se questo è il vostro HTML elementi della lista:

<ul id="sortable"> 
    <li>Option 1</li> 
    <li>Option 2</li> 
    <li>Option 3</li> 
    <li>Option 4</li> 
    <li>Option 5</li> 
    <li>Option 6</li> 
</ul> 

Hai solo bisogno di fare:

$("#sortable").kendoSortable({ 
}); 

Controllare qui: http://jsfiddle.net/OnaBai/gN3jV/

Con questo l'inizializzazione di default si ha l'elemento trascinato assomiglia a quello originale (stesso stile CSS) ma puoi cambiarlo definendo un gestore hint:

$("#sortable").kendoSortable({ 
    hint:function(element) { 
     return element.clone().addClass("ob-hint"); 
    } 
}); 

Dove aggiungo all'elemento trascinato la classe CSS ob-hint.

vedere l'esempio precedente modificato: http://jsfiddle.net/OnaBai/gN3jV/1/

e si può anche lo stile del segnaposto (dove a goccia) attraverso la definizione di un gestore che aggiunge una classe all'elemento o anche un testo.

$("#sortable").kendoSortable({ 
    hint:function(element) { 
     return element.clone().addClass("ob-hint"); 
    }, 
    placeholder:function(element) { 
     return element.clone().addClass("ob-placeholder").text("drop it here"); 
    }, 
}); 

L'esempio modificato qui: http://jsfiddle.net/OnaBai/gN3jV/2/

Answer 2

Non v'è alcun modo per fare questo nei controlli Kendo UI. Telerik dice che non hanno piani per farlo e hanno molte scuse sul perché non lo faranno.

Tuttavia, utilizzando alcuni JavaScript, c'è un modo per aggirarlo. Se rendi ordinabili entrambi gli elenchi, puoi filtrare gli elementi 'trascinabili', in modo che non cambino posizione.

$("#draggable").kendoSortable({ 
    connectWith: "#sortable",  
    start: function() { 
    $("#draggable div").each(function() { 
     $(this).removeClass("sortable"); 
    }); 
    } 
}); 

Questo violino mostra questo: http://jsfiddle.net/kgjertsen/r4xmLevq/

L'unico inconveniente è la voce 'trascinabile' scompare fino a cadere sulla zona ordinabile.