2

我正在使用 Denis 出色的 tableDnD jquery 插件。我想允许用户拖放行，但前提是他们的鼠标位于行内的特定 td 内。

到目前为止，我已经尝试了两种方法：（请注意，var "tr" 包含我正在操作的 jquery 行元素。td id="queue_position" 是我尝试启用拖动的那个）。

我认为 tableDnD 仅在启动时检查 nodrag 类。动态添加或删除 nodrop 类不会改变任何内容。所以我尝试了两种方法来做我需要做的事情。

一种尝试是深入研究 tableDnD 内部结构并尝试将其称为 makeDraggable 函数。尝试二是在添加/删除 nodrop 类后重新初始化 tableDnD。

这些方法中的任何一种似乎都可以在允许的 td 中启用拖动。离开 td 时，它们都没有正确禁用拖动。一旦在 mouseenter 事件中启用了一行，它将永远保持启用状态。

我宁愿找到一种方法来做我需要的事情，而无需修改 tableDnD。

关于如何使这项工作的任何建议？

$(tr)
  .addClass("nodrag")
  .find("td[id='queue_position']")
//.on("mouseenter",function() { 
//    $(tr).removeClass("nodrag"); 
//    $.tableDnD.makeDraggable(document.getElementById("tableLeft"));
//})
//.on("mouseleave",function() { 
//    $(tr).addClass("nodrag");    
//    $.tableDnD.makeDraggable(document.getElementById("tableLeft"));
//});

 .on("mouseenter",function() { 
      $(tr).removeClass("nodrag"); 
      $("#tableLeft").tableDnD({onDrop: handleDragDrop});
 })
 .on("mouseleave",function() { 
      $(tr).addClass("nodrag");
      $("#tableLeft").tableDnD({onDrop: handleDragDrop});
 });
4

3 回答 3

1

我（共同维护者）现在完全偶然地在这里看到了这个问题......当你在 GitHub 上的项目问题队列中提出你的问题时，你应该得到更好的回应。

您是否尝试过dragHandle查看示例：“身份行”

我敢肯定，如果您只是为class="drag-me-only"要用作拖动句柄的表格 cel 提供一个类名 ( ) 并将该类名提供为配置选项 ( dragHandle: ".drag-me-only") 选项，那么我们将更改光标，所有其他魔法将随之而来仅当鼠标悬停在该 cel 上时。

那对你有用吗？

如果您认为您有我们遗漏的内容，欢迎您提交拉取请求。

于 2013-08-25T23:29:45.163 回答
0

在等着看是否有人提出更好的选择时，我修改了 tableDnd 来做我需要的。

为此，您想要激活以进行拖动的每个 tr 中的每个 td 都必须具有一个 ID 相同的 id 可用于多列中的 td。我本可以使用类检测方法，但命名为 td's 似乎对于包含许多列的表来说不那么大惊小怪。

<tr><td id='queue_position'></td><td id='vin'></td></tr>
<tr><td id='queue_position'></td><td id='vin'></td></tr>
  1. 添加了一个名为 activeCols 的新选项。activeCols 是一个包含 0 个或多个 td id 的数组
  2. 向 makeDraggable 函数添加了代码，如果 activeCols 为空或不存在则执行传统的操作，如果存在则执行不同的操作。

如果其他人想玩或使用我的模组，整个修改后的 tableDnD 可在jsfiddle 获得

才刚刚开始测试，但它似乎到目前为止工作。我仍然宁愿在不修改 tableDnD 的情况下执行此操作，但至少我可以检查我的待办事项列表中的项目，直到出现更好的解决方案。

tableDnD 定义中的新选项：

$("#tableLeft").tableDnD({
        onDrop: handleDragDrop,
        activeCols: ["queue_position","vin"] // new option
});

新选项处理：

this.tableDnDConfig = {
    activeCols: options.activeCols ? options.activeCols: [],
    etc, etc, etc

新的 makeDraggable 代码：

    makeDraggable: function(table) {
    // Now initialise the rows
    var rows = table.rows; //getElementsByTagName("tr")
    var config = table.tableDnDConfig;
    for (var i=0; i<rows.length; i++) {
        // To make non-draggable rows, add the nodrag class (eg for Category and Header rows) 
    var nodrag = jQuery(rows[i]).hasClass("noDrag");

    if (config.activeCols.length > 0) {
    if (!nodrag) {
        jQuery(rows[i]).find("td").each(function() {
        if (jQuery.inArray($(this).prop("id"),config.activeCols) !== -1) {
            jQuery(this).mousedown(function(ev) {
            jQuery.tableDnD.dragObject = this.parentNode;
            jQuery.tableDnD.currentTable = table;
            jQuery.tableDnD.mouseOffset = jQuery.tableDnD.getMouseOffset(this.parentNode, ev); // or rows[i].offset?
            if (config.onDragStart) {
                config.onDragStart(table, this.parentNode);
            }
            return false;
            }).css("cursor", "move");
        }
        });
    }
    }
    else {
    if (! nodrag) { //There is no NoDnD attribute on rows I want to drag
        jQuery(rows[i]).mousedown(function(ev) {
        if (ev.target.tagName == "TD") {
            jQuery.tableDnD.dragObject = this;
            jQuery.tableDnD.currentTable = table;
            jQuery.tableDnD.mouseOffset = jQuery.tableDnD.getMouseOffset(this, ev);
            if (config.onDragStart) {
            // Call the onDrop method if there is one
            config.onDragStart(table, this);
            }
            return false;
        }
        }).css("cursor", "move"); // Store the tableDnD object
    }
    }
    }
},
于 2013-05-31T06:49:31.797 回答
0

在表格的标题行上，您可能想要添加 nodrag 和 nodrop 类。您只需要在两个类名之间放置一个空格（class="nodrag nodrop"）

于 2013-07-09T17:59:50.700 回答