tableDnD -只支持一次拖放<td>在一个<tr>

tableDnD - enabling drag / drop for only one <td> in a <tr>

本文关键字：tr 一个 td 拖放 -只 支持 一次 tableDnD      更新时间：2023-09-26

我使用的是Denis出色的tableDnD jquery插件。我希望允许用户拖放行，但只有当他们的鼠标在行内的特定td内时。

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

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

尝试一是潜入tableDnD内部并尝试调用它的makeDraggable函数。第二次尝试是在添加/删除nodrop类后重新初始化tableDnD。

这两种方法似乎都可以在允许的范围内启用拖动。它们都不能正确地禁用在离开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});
 });

您尝试过dragHandle吗?参见示例:"Identity row "

我敢肯定，如果你只是给表单元格一个类名(class="drag-me-only")，你想用它作为拖拽手柄，并提供类名作为配置选项(dragHandle: ".drag-me-only")选项，然后我们会改变光标，所有其他魔术将跟随套件，只有当鼠标在该单元格上。

在等待是否有人提出更好的替代方案时，我已经修改了tableDnd以完成我需要的操作。

要做到这一点，每个tr中的每个td都必须有一个id。相同的id可以用于多个列中的td。我本可以使用类检测方法，但是对于有许多列的表，命名为td的方法似乎不那么麻烦。

<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个或多个id
    2. 的数组。
  2. 添加了makeDraggable函数的代码，当activeCols为空或不存在时，它会做传统的事情，如果它存在，它会做不同的事情。

如果有人想玩或使用我的mod，整个修改后的tablend可在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
    }
    }
    }
},

在表的标题行上，您可能需要添加nodrag和nodrop类。你只需要在两个类名之间留出一个空格(class="nodrag nodrop")

相关文章：