1

draggablejquery.gantt hereでjquery-ui コンポーネントを使用しています。アイテムのドラッグを簡単に有効にすることはできます$('.ganttRed').draggable()が、これの問題は、下のスライダーを使用してグラフを左から右にスクロールし始めると、移動した要素がグラフとともにスクロールするのではなく、その場所にとどまることです。

ソースを調べたところmargin-left、スクロール中に が変更されていることがわかりました。ただし、属性をjquery-ui使用し、要素が存在する場合はその位置を保持します。私の CSS の知識はこれで終わりです。これを修正する方法について提案を提供していただける方がいらっしゃいましたら、私はそれを大いに感謝します。leftleft

http://jsfiddle.net/Y2cxa/で問題を示すフィドルを作成しました。私が話している動作を見るために：

  • グラフをスクロールします (マウス ホイールまたは下部のスライダーを使用)。物事は期待どおりに見え、動作するはずです。
  • マゼンタ (-ish) のバーを動かしてからスクロールします。

繰り返しになりますが、お時間をいただきありがとうございます。ご協力をお願いいたします。

よろしくお願いします

4

2 に答える 2

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 に答える