1

ここに、2列のテーブルがあります。最初はドラッグ可能な div オブジェクトです:

$(function() {
    $( "div.available" ).draggable({
              snap: "div.timeline-axis-grid"
    });
  });

2 列目は、Google ビジュアライゼーション API に基づくタイムライン テーブルです。 http://jsbin.com/oLaqoToH/5

タイムライン テーブルをダブルクリックすると、新しい div オブジェクトがタイムラインに作成されます。

1列目からタイムラインへのオブジェクトのドラッグを終了するときに、ダブルクリックをシミュレートしたいと思います。とてもシンプルなので、この小さなハックで div オブジェクトを 1 列目からタイムラインに追加したいと思います。これを行う方法はありますか？これはjqueryで使用できますか? ドラッグ可能なエンディングでダブルクリックをシミュレートするにはどうすればよいですか?

更新： このアクションには機能があるため、ダブルクリックをシミュレートする必要はありません：

http://almende.github.io/chap-links-library/js/timeline/timeline.js

/**
 * Double click event occurred for an item
 * @param {Event}  event
 */
links.Timeline.prototype.onDblClick = function (event) {
    var params = this.eventParams,
        options = this.options,
        dom = this.dom,
        size = this.size;
    event = event || window.event;

    if (params.itemIndex != undefined) {
        var item = this.items[params.itemIndex];
        if (item && this.isEditable(item)) {
            // fire the edit event
            this.trigger('edit');
        }
    }
    else {
        if (options.editable) {
            // create a new item

            // get mouse position
            params.mouseX = links.Timeline.getPageX(event);
            params.mouseY = links.Timeline.getPageY(event);
            var x = params.mouseX - links.Timeline.getAbsoluteLeft(dom.content);
            var y = params.mouseY - links.Timeline.getAbsoluteTop(dom.content);

            // create a new event at the current mouse position
            var xstart = this.screenToTime(x);
            var xend = this.screenToTime(x  + size.frameWidth / 10); // add 10% of timeline width
            if (options.snapEvents) {
                this.step.snap(xstart);
                this.step.snap(xend);
            }

            var content = options.NEW;
            var group = this.getGroupFromHeight(y);   // (group may be undefined)
            var preventRender = true;
            this.addItem({
                'start': xstart,
                'end': xend,
                'content': content,
                'group': this.getGroupName(group)
            }, preventRender);
            params.itemIndex = (this.items.length - 1);
            this.selectItem(params.itemIndex);

            this.applyAdd = true;

            // fire an add event.
            // Note that the change can be canceled from within an event listener if
            // this listener calls the method cancelAdd().
            this.trigger('add');

            if (this.applyAdd) {
                // render and select the item
                this.render({animate: false});
                this.selectItem(params.itemIndex);
            }
            else {
                // undo an add
                this.deleteItem(params.itemIndex);
            }
        }
    }

    links.Timeline.preventDefault(event);
};

ダブルクリック シミュレーションを使用する代わりに、この関数を使用してオブジェクトをタイムラインにドラッグするにはどうすればよいですか? ありがとう！

4

2 に答える 2

0

これは私のために働いた：

$(function() {
    $( "div.timeline-event" ).draggable({
          snap: "div.timeline-axis-grid",
          stop: function(event){ timeline.onDblClick(event); }
    });
});
于 2013-12-17T16:35:35.527 に答える