jquery ui draggable cambia automaticamente la larghezza

Question

Sto seguendo attraverso jquery ui docs per rendere i div trascinabili e ordinabili. E funziona per il trascinamento e l'ordinamento. Ma quando estraggo un div da trascinabile a ordinabile, la larghezza delle modifiche trascinabili e non mantiene la larghezza che dovrebbe essere.

Ecco l'demo

JS:

$(function() { 
    $('#grid-main_content').sortable({ 
     revert:true 
    }); 

    $('#block-list .block').draggable({ 
     connectToSortable: '#grid-main_content', 
     helper: 'clone', 
     revert:'invalid' 
    }); 
}) 

E se io ispezionare l'elemento che ho trascinato al ordinabili, posso vedere che uno stile in linea è dato al blocco trascinabile con una larghezza (di jquery).

Come posso mantenere lo stile di cui è già dotato il blocco? Grazie.

Answer 1

È possibile utilizzare draggables' start event, per mantenere lo stile specifico del aiutante

$('#block-list .block').draggable({ 
    connectToSortable: '#grid-main_content', 
    helper : 'clone', 
    revert : 'invalid', 
    start : function(event, ui){ 
     $(ui.helper).addClass("ui-helper"); 
    } 
}); 

CSS:

.ui-helper { 
    width: 100% !important; 
} 

Demo

Answer 2

Ho appena creare un Codepen demo

Qualsiasi modo dare un'occhiata a questo, e copiare i codici se sembra funzionare.

se è necessario la parte inferiore della schiena div alla sua dimensione originale, Per favore cambia

#grid-main_content { 
width:80%;  

Answer 3

Questo ha funzionato per me. Basta impostare la larghezza dell'elemento trascinabile

$('.selector').draggable({ 
    helper: 'clone', 
    start: function(event, ui){ 
     $(ui.helper).css('width', `${ $(event.target).width() }px`); 
    } 
}) 

in questo modo non è necessario aggiungere il CSS