tableDnD -只为<tr>中的一个<td>启用拖放

Question

我正在使用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});
 });      

Answer 1

你试过dragHandle --见示例：“标识行”

我确信，如果您只为要用作拖动句柄的表cel提供一个类名(class="drag-me-only")，并提供该类名作为配置选项(dragHandle: ".drag-me-only")选项，那么我们将更改游标，所有其他魔法只有在鼠标结束时才会跟随。

Answer 2

在等待别人提出更好的替代方案时，我修改了tableDnd，以满足我的需要。

要使每个tr中的每个td都工作，您想要在每个tr中进行拖动，必须有一个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或更多td id的数组
2. 在makeDraggable函数中添加了代码，如果activeCols为空或不存在，则执行传统内容；如果存在，则执行不同的操作。

如果其他人想玩或使用我的mod，那么整个修改后的tableDnD都可以在小提琴上使用。

刚刚开始测试，但到目前为止似乎还有效。我仍然希望在不修改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
    }
    }
    }
},

Answer 3

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