使用jquery.gantt集成jquery ui draggable(工作但会中断滚动)

Question

我使用jQuery的UI draggable组件与jquery.gantt 这里.我可以轻松地对项目进行拖动,$('.ganttRed').draggable()但问题是,一旦我们开始使用下面的滑块从左到右滚动图形,移动的元素将保留在它们的位置而不是滚动图形.

我查看了源代码,根据我的理解,margin-left在滚动期间正在更改; 但jquery-ui使用left属性并在left元素存在时保持其位置.我的CSS知识就此结束,所以如果你们中的任何一个愿意就如何解决这个问题提出任何建议; 我将非常感激.

我创建了一个演示问题的小提琴:http://jsfiddle.net/Y2cxa/.为了看到我所说的行为:

• 滚动图表(使用鼠标滚轮或底部的滑块); 事物的外观和行为应该如预期的那样.
• 移动任何洋红色(-ish)条,然后滚动.

再次感谢您的时间和任何帮助将不胜感激.

最好的祝福

Answer 1

你可能已经解决了这个问题或者现在做了别的事情但是因为我需要这个以及我解决了它.

在这里找到了解决方案:

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

首先,我只是将左侧值复制到margin-left,然后完全删除左侧值,但这会导致一些奇怪的数字.

为了解决这个问题,我将左边的起始值与左边的最终值进行了比较,并将相同的像素差异应用于margin-left!

简单地替换:

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

有:

$('.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', '');
    }
});