Gantt Chart with jQuery
-
27-09-2019 - |
Question
http://jsfiddle.net/JeaffreyGilbert/VkghS/
Currently sorting between rows can be done by dragging barWrap (grey). To move gantt bar can be done by dragging the bar.
What I want is sorting and moving can be done at once by dragging the bar. How to achieve this?
Any helps would be appreciated, thank you.
Solution
The sortable widget has a handle feature. So:
$(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();
});
Edited (see comment): You have to take out the draggable, which IMO isn't so bad because people can still use resizable to change the position. You could experiment with draggable handles to find a method where they both work.
OTHER TIPS
It's an old question, but you just need to add another div wrapper to achieve this (jsfiddle):
$(function() {
$('.barWrap').wrapInner('<div class="sorter"></div>');
$( ".gantt" ).sortable({
handle: '.sorter'
});
$( ".bar" ).resizable({
handles: 'e, w',
grid: [ 20, 0 ]
});
$(".gantt").disableSelection();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow