0

タイムライン上でイベントをドラッグできる水平スクロールのタイムラインを作成したいと考えています。そのために、動的グリッドを作成し、jQuery ui Drag drop を使用しました。

正常に動作しますが、水平にスクロールすると、ドロップされた要素の位置が変わりません。したがって、おそらく、ドロップされたすべての要素の位置を維持する必要があります。これを達成する簡単な方法はありますか、つまりcssなどを使用しますか?

    var dropBox;
    var drag;
    var maxEventsInMonth = 10;
    var maxDataRow = 6;

ご参照ください。

http://jsfiddle.net/dipal/GSNrX/14/

4

1 に答える 1

1

ドラッグスタートで要素を複製し、ターゲット HTML を複製で置き換えて、ドラッグされた要素を削除できます。したがって、グリッド内にネイティブにある画像が得られます。

デフォルトのコードからjsfiddle（http://jsfiddle.net/uDYEr/）を作成し、handleDrop-functionをコメントアウトしました。これはエラーの原因となり、コードをクリーンアップしたくないためです;-)

主に次のことを行いました。

2 つの新しい変数を追加します。

    var dragClone = false;
    var dragElement = false;

開始時に要素を複製します。

        $('#drag li').draggable({
            revert: "invalid",
            cursor: "move",
            start : function() {
                dragClone = $(this).clone();
                dragElement = $(this);
            }
        });

次に、ターゲットに追加dragCloneして削除dragElementしdropます:

        dropBox.droppable({
            accept: "#drag li",
            scroll: true,
            drop: function (event, ui) {
                $(this).html(dragClone);
                dragElement.remove();
              // handleDrop($(this), event, ui);
                return true;
            }
        });

お役に立てれば。または、少なくともこれを作成する方法についてのアイデアを提供します。

于 2012-12-26T10:38:48.327 に答える