diagramme de Gantt avec jQuery

Question

http://jsfiddle.net/JeaffreyGilbert/VkghS/

tri actuellement entre les lignes peut être fait en faisant glisser barWrap (gris). Pour déplacer la barre de Gantt peut être fait en faisant glisser la barre. Ce que je veux c'est le tri et le déplacement peut être fait tout de suite en faisant glisser la barre. Comment y parvenir?

Toute aide serait appréciée, merci.

Answer 1

Le widget triable possède une fonction de poignée. Alors:

$(function() { 
    $(".gantt").sortable({ 
     handle: '.bar' // Make it sortable by dragging the .bar instead of the container 
    }); 
    /* 
    $(".bar").draggable({ 
     connectToSortable: '.gantt', 
     containment: '.barWrap', 
     grid: [20, 0] 
    }); 
    */ 
    $(".bar").resizable({ 
     handles: 'e, w', 
     grid: [ 20, 0 ] 
    }); 

    $(".gantt").disableSelection(); 
}); 

Modifié (voir le commentaire): Vous devez prendre le draggable, qui est l'OMI pas si mal parce que les gens peuvent toujours utiliser redimensionnable pour changer la position. Vous pouvez expérimenter avec des poignées draggables pour trouver une méthode où les deux fonctionnent.

Answer 2

Il est une vieille question, mais il vous suffit d'ajouter un autre emballage div pour y parvenir (jsfiddle):

$(function() { 
    $('.barWrap').wrapInner('<div class="sorter"></div>'); 
    $(".gantt").sortable({ 
     handle: '.sorter' 
    }); 

    $(".bar").resizable({ 
     handles: 'e, w', 
     grid: [ 20, 0 ] 
    }); 

    $(".gantt").disableSelection(); 
});