Integrate jquery ui draggable with jquery.gantt (works but breaks scrolling)

Question

I am using the jquery-ui draggable component with jquery.gantt here. I could do enable drag on the items easily by $('.ganttRed').draggable() but the problem with this is that once we start scrolling the graph left to right using the slider below, the elements that are moved remain where they are instead of scrolling with the graph.

I looked through the source and from my understanding the margin-left is being changed during the scrolling; but jquery-ui uses the left attribute and in the presence of left the element keeps its position. My CSS knowledge ends just about there so if any of you are willing to provide any suggestions on how this can be fixed; I will greatly appreciate it.

I have a created a fiddle demonstrating the problem at: http://jsfiddle.net/Y2cxa/. In order to see the behavior I am speaking about:

• Scroll the graph (either with your mouse wheel or the slider at the bottom); things should look and behave as expected.
• Move any of the magenta(-ish) bars around and then scroll.

Again, thank you for your time and any assistance will be greatly appreciated.

Best regards

Answer 1

You have probably solved this or done something else by now but since I needed this aswell i solved it.

Got a solution for you here:

http://jsfiddle.net/Y2cxa/18/

First I simply copied the left value to margin-left and then removed the left value completely, however this led to some strange numbers.

To solve this I compared the start value of left with the final value of left and applied the same difference in pixels to margin-left!

Simply replace:

$('.ganttRed').draggable({axis:'x'});

with:

$('.ganttRed').draggable({
    axis:'x',
    start: function(event, ui) {
        $(this).data("startx",$(this).offset().left);
    },
    stop: function(event, ui) {
        var change = $(this).offset().left - $(this).data("startx");
        var value = $(this).css('margin-left');
        value = value.split("px");
        value = parseInt(value[0]) + change;
        $(this).css('margin-left', value);
        $(this).css('left', '');
    }
});

Answer 2

I believe below is a better solution and I am using it in my application

For vertical and horizonal dragging

$('.ganttRed').draggable(
{
        start: function (event, ui) {
        $(this).data("startx", $(this).css('left').split("px")[0]);
        $(this).data("starty", $(this).css('top').split("px")[0]);
    },
    stop: function (event, ui) {
        var left = parseInt($(this).css('left').split("px")[0]);
        var changex = left - parseInt($(this).data("startx"));
        var top = parseInt($(this).css('top').split("px")[0]);
        top -= top % 24;
        $(this).css('top', top);
        var changey = top - parseInt($(this).data("starty"));
    }
});

changex, changey will be used in calculation while updating in database

For horizontal resizing

$(".ganttRed").resizable({ handles: 'e, w' });