我使用的是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>
- 增加了一个名为activeCols的新选项。activeCols是一个包含0个或多个id 的数组。
- 添加了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")