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

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

您是否尝试过dragHandle examples: "Identity rows"

我确信如果您只是为要用作拖动句柄的表格cel提供类名（class="drag-me-only"）并提供该类名作为配置选项（dragHandle: ".drag-me-only"）选项然后我们会改变光标，所有其他魔法只有当鼠标在那个cel上时才会跟随套件。

这对你有用吗？

如果您认为自己有错过的话，欢迎提交拉取请求。

Answer 2

在等待某人建议更好的选择时，我已经修改了tableDnd来做我需要的事情。

为了使这个工作，你想要活跃进行拖动的每个tr中的每个td必须有一个I.D.相同的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>

添加了一个名为activeCols的新选项。 activeCols是一个包含0或更多td id
为makeDraggable函数添加了代码，如果activeCols为空或不存在则执行传统的操作，如果确实存在则执行不同的操作。

如果有其他人想玩或使用我的mods，整个修改过的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
    }
    }
    }
},

Answer 3

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

tableDnD - 仅在一个中启用拖放功能

3 个答案: