Question

我试图实现与this

非常类似的东西

但我使用$(document).ready(function () { $('#v-btn').on('click',function(){ $('.sub-nav').toggle(); //or to just show: //$('.sub-nav').show(); }); });（table）代替他们正在使用的dataTable()。

看来，将数据打包到传递给div容器/回调的对象的方法找不到任何drop类

因此，在我的external-event回调中，我最终得到drop undefined

eventObject

}

这最终产生了这个

似乎在类名中加上“odd”和“even”。为了摆脱这种情况，我可以围绕（在表格下方）function populateWorkOrders(){ var workOrdersTableBody = document.getElementById("workOrdersTableBody");//Link to the containing element using getElementById or similar for (i=0;i<workOrders.length;i++) { //Loops for the length of the list var tr=document.createElement('tr'); //Creates <ul> element tr.setAttribute("class","external-event"); tr.setAttribute("draggable","true"); var workOrderId=document.createElement('td'); //Chrome seems not to like the variable "name" in this instance workOrderId.innerHTML=workOrders[i].workOrderId; //Adds name tr.appendChild(workOrderId); var workOrderTitle=document.createElement('td'); workOrderTitle.innerHTML=workOrders[i].workOrderTitle; tr.appendChild(workOrderTitle); var workOrderAccount=document.createElement('td'); workOrderAccount.innerHTML=workOrders[i].workOrderAccount; tr.appendChild(workOrderAccount); var workOrderPriority=document.createElement('td'); workOrderPriority.innerHTML=workOrders[i].workOrderPriority; tr.appendChild(workOrderPriority); workOrdersTableBody.appendChild(tr); } //THIS IS WHATS NOT RUNNING AND IT SEEMS THAT IT CANT FIND ANYTHING $('#external-events tr.external-event').each(function() { var eventObject = { title: "fulltitle"//$.trim($(this).data) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // make the event draggable using jQuery UI $(this).draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 0 // original position after the drag }); }); $('#workOrdersTable').dataTable();标签中的所有内容，然后打破div但仍然无法解决问题。

这是html：

DataTables()

所以上面显示了可拖动的元素。这是drop的代码。

    <title>TITLE</title>
    <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/indexJs.js"></script>
</head>
<body>
    <div>
        <!--had to load this separate from full calender lib else there were conflicts-->
        <script type="text/javascript" src="js/libs/datatables/media/js/jquery.dataTables.js"></script>
        <table class="display" id="workOrdersTable">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Account</th>
                    <th>Priority</th>
                </tr>
            </thead>
            <tbody id="workOrdersTableBody">
            </tbody>
        </table>
    </div>
    <script>
        populateWorkOrders();
    </script>
    <br>
    <div>
        <select id="technicianServiceTeamSelectorDropDown"  style="width:25%"  onchange="populateTechnicians();"></select>
        <br>
        <select id="technicianSelectorDropDown" style="display:none; width:25%" onchange="populateCalendar()"></select>
        <script>
                populateTechniciansServiceTeams();
        </script>
    </div>
    <br>
    <div id='calendar'>
        <!--had to load this separate from data tables lib else there were conflicts-->
        <script type="text/javascript" src='js/libs/fullcalendar/lib/jquery.min.js'></script>
        <script type="text/javascript" src='js/libs/fullcalendar/lib/moment.min.js'></script>
        <script type="text/javascript" src='js/libs/fullcalendar/fullcalendar.js'></script>
    </div>
</body>

Answer 1

嗯，首先，我没有看到id =＆＃34;外部事件＆＃34;您提供的图像上的任何位置，因此我不确定绑定的设置位置。您是否在开发过程中的某个时刻更改了ID名称？

其次，当我过去做过这样的事情时，我发现最简单的就是创建一个包含实际html代码的字符串，如下所示：

    var html = '<td id="' + theId + '" class="' + theClass + '" >' + someText + '</td>';

然后在最后使用jquery .append（）或.html（），具体取决于发生的事情：

    $('#myTable').append(html);

我不知道这对你有帮助，但我用这种方法取得了很大的成功。

为了设置可拖动事件，有几个选项：如果你需要，你可以使用jQuery的draggable。我之前也手动完成了所有操作，使用.on（＆＃39; mousedown＆＃39; .....）开始活动，然后是.on（＆＃39; mousemove＆＃39;， ...）更改左侧属性，然后更改.on（＆＃39; mouseup＆＃39;，...）以结束它。当拖车更复杂时，这对我来说效果更好。

希望这有帮助。

Answer 2

有两个问题妨碍了这种工作

添加jquery-ui

<script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>

并将每个更改为tr.external-event

$('tr.external-event').each(function() {

不能拖延工作

2 个答案: