Question

我是网络开发和编码的初学者，如果我提出一些微不足道的问题，我很抱歉...

我想创建一个带时间轴的作业scheudle工具，所以我在网上找到基于google visualization api的这个例子almende.github.io/chap-links-library/js/timeline/examples/example15_mobile.html。

现在一切正常，但我创建了一个包含两列的表：

<table width="1300" height="100%" border="1" cellpadding="1" cellspacing="1">
  <tr>
    <th width="250" align="left" valign="top" scope="row"><div id="jobs"><p>JOBS</p>
        <div class="timeline-event timeline-event-range ui-widget ui-state-default available" style="position: absolute; width: 171.66209509852223px;"><div class="timeline-event-content">available</div></div><br></br>
        <div class="timeline-event timeline-event-range ui-widget ui-state-default unavailable" style="position: absolute; width: 222.4193548387097px;"><div class="timeline-event-content">unavailable</div></div>
    </div></th>
    <td width="850" align="left" valign="top"><div id="mytimeline"></div></td>
  </tr>


</table>

在第二列中是示例div ID时间轴的代码，在第一列中是两个div对象，我想让它可拖动到时间轴上，因此可以在googl visualization api array上拖放

我尝试使用jquery：

$(function() {
    $( "div.available" ).draggable();
  });
and yes its draggable but HOW I can add it to the dataTable

// Called when the Visualization API is loaded.
    function drawVisualization() {
        // Create and populate a data table.
        data = new google.visualization.DataTable();
        data.addColumn('datetime', 'start');
        data.addColumn('datetime', 'end');
        data.addColumn('string', 'content');
        data.addColumn('string', 'group');
        data.addColumn('string', 'className');

        // create some random data
        var names = ["Algie", "Barney", "Chris", "Pera", "Mile"];
        ime = names;
        for (var n = 0, len = names.length; n < len; n++) {
            var name = names[n];
            var now = new Date();
            var end = new Date(now.getTime() - 12 * 60 * 60 * 1000);
            for (var i = 0; i < 5; i++) {
                var start = new Date(end.getTime() + Math.round(Math.random() * 5) * 60 * 60*1000);
                ekstra = new Date();
                var end = new Date(start.getTime() + Math.round(4 + Math.random() * 5) * 60 * 60 * 1000);

                var r = Math.round(Math.random() * 2);
                var availability = (r === 0 ? "available" : (r === 1 ? "unavailable" : "maybe"));
                var group = availability.toLowerCase();
                var content = availability;
                data.addRow([start, end, content, name, group]);

            }
        }
        var kraj = new Date(now.getTime() + 12 * 60 * 60 * 2000);
            data.addRows([
    [ ekstra,  kraj, 'Job ID#0001', 'Worker Name','av' ],
    [new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0), 'Job ID#0001', 'Worker Name','av' ]
    ]);     

        // specify options
        var options = {
            width:  "100%",
            height: "99%",
            layout: "box",
            axisOnTop: true,
            eventMargin: 10,  // minimal margin between events
            eventMarginAxis: 0, // minimal margin beteen events and the axis
            editable: true,
            showNavigation: true
        };

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));

        // register event listeners
        google.visualization.events.addListener(timeline, 'edit', onEdit);

        // Draw our timeline with the created data and options
        timeline.draw(data, options);

        // Set a customized visible range
        var start = new Date(now.getTime() - 4 * 60 * 60 * 1100);
        var end = new Date(now.getTime() + 8 * 60 * 60 * 1000);
        timeline.setVisibleChartRange(start, end);
    }

    function getRandomName() {
        var names = ["Algie", "Barney", "Grant", "Mick", "Langdon"];

        var r = Math.round(Math.random() * (names.length - 1));
        return names[r];
    }

    function getSelectedRow() {
        var row = undefined;
        var sel = timeline.getSelection();
        if (sel.length) {
            if (sel[0].row != undefined) {
                row = sel[0].row;
            }
        }
        return row;
    }

    function strip(html)
    {
        var tmp = document.createElement("DIV");
        tmp.innerHTML = html;
        return tmp.textContent||tmp.innerText;
    }

    // Make a callback function for the select event
    var onEdit = function (event) {
        var row = getSelectedRow();
        var content = data.getValue(row, 2);
        var availability = strip(content);
        var newAvailability = prompt("Enter status\n\n" +
                "Choose from: Available, Unavailable, Maybe", availability);
        if (newAvailability != undefined) {
            var newContent = newAvailability;
            data.setValue(row, 2, newContent);
            data.setValue(row, 4, newAvailability.toLowerCase());
            timeline.draw(data);
        }
    };

    var onNew = function () {
        alert("Clicking this NEW button should open a popup window where " +
                "a new status event can be created.\n\n" +
                "Apperently this is not yet implemented...");
    };

那么，当我将它拖到时间线时，我如何将它添加到数据行？关于jsbin的我的代码：http://jsbin.com/oLaqoToH/2/edit

所以我想将div对象从第1列拖到第2列（时间轴）并将其添加到数据数组中。

时间轴是可滚动的，但具有此功能：

timeline.getDataRange();

Object {min: Sun Dec 31 1899 14:00:00 GMT+0100 (Central Europe Standard Time), max: Fri Dec 13 2013 15:07:22 GMT+0100 (Central Europe Standard Time)}

所以这是我在时间轴上看到的日期范围......以及功能： $('#mytimeline').width();我得到时间轴的像素，所以现在我可以计算1pixel =时间？

现在当我将div对象从第1列拖到第2列（#mytimeline）时，如何将drag divObject添加到时间轴中？

请帮助并抱歉我的英语，这很糟糕，但我正在努力学习

拖放到谷歌可视化数据表数组

0 个答案: