1

我在这里draggable使用带有 jquery.gantt 的 jquery-ui 组件。我可以很容易地启用对项目的拖动，但这样做的问题是，一旦我们开始使用下面的滑块从左到右滚动图形，移动的元素将保持在它们所在的位置，而不是随图形滚动。$('.ganttRed').draggable()

我查看了源代码，据我了解margin-left，滚动期间正在更改；但jquery-ui使用该left属性并在left元素存在的情况下保持其位置。我的 CSS 知识就到此为止了，所以如果你们中的任何人愿意就如何解决这个问题提供任何建议；我将不胜感激。

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

  • 滚动图表（使用鼠标滚轮或底部的滑块）；事物的外观和行为应符合预期。
  • 移动任何洋红色（-ish）条，然后滚动。

再次感谢您的宝贵时间，我们将不胜感激。

最好的祝福

4

2 回答 2

5

您现在可能已经解决了这个问题或做了其他事情，但因为我也需要这个，所以我解决了它。

在这里为您提供解决方案：

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

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

为了解决这个问题，我将 left 的起始值与 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', '');
    }
});
于 2013-01-24T14:23:35.450 回答
0

我相信下面是一个更好的解决方案，我在我的应用程序中使用它

用于垂直和水平拖动

$('.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将在数据库更新时用于计算

用于水平调整大小

$(".ganttRed").resizable({ handles: 'e, w' });
于 2013-12-12T09:32:55.280 回答