jquery UI sortable：如何更改“占位符”对象的外观？

Posted 2023-02-24

【中文标题】jquery UI sortable：如何更改“占位符”对象的外观？

【英文标题】：jquery UI sortable: how can I change the appearance of the "placeholder" object?

【发布时间】：2011-01-10 03:16:58

【问题描述】：

在http://jqueryui.com/demos/sortable/#placeholder 给出的示例中，占位符是拖动任何项目时出现的橙色框。

可以使用placeholder 选项调整此元素——但它只允许您修改元素的类，如下所述：http://jqueryui.com/demos/sortable/#options

我想更多地自定义这个元素，例如通过向placeholder 选项提供函数的方式与向helper 选项提供函数的方式相同。

我需要改变什么（例如在 sortable.js 中）才能做到这一点？

【参考方案1】：

查看 ui.sortable.js (1.7.2) 的源代码，您可以作弊并将placeholder 设置为具有element 函数和update 函数的对象。 element 函数用于返回占位符 dom 对象，update 函数允许您执行诸如更正其大小之类的操作（如果您想查看默认实现的功能，可以查看 sortable 中的 _createPlaceholder 函数)。

例如，下面将创建一个列表项，其中包含单词 test 作为占位符（注意它返回实际的 dom 对象 ([0]) 而不是 jQuery 对象本身） ：

$("#sortable").sortable(
    placeholder: 
        element: function(currentItem) 
            return $("<li><em>test</em></li>")[0];
        ,
        update: function(container, p) 
            return;
        
    
);

如果我正确读取源代码，element 函数应传递当前项（jQuery 对象），this 应指向 sortable 本身（即在此实例中为 $("#sortable")）。在update 中，您传递了“容器”，它是包含所有选项、元素等的对象以及placeholder 本身。

请注意，这是一个未记录的 hack，因此它显然不受支持，并且可能会随着 jQuery UI 的下一个版本而改变......但它仍然可能对你有用，因为你反正是在谈论直接编辑ui.sortable.js。

希望对您有所帮助。

【讨论】：

美丽；如果您想在拖动时希望项目具有固定高度（例如，由于项目很大）时进行可排序工作，您可以使用（在上面的更新功能中）：container.refreshPositions(); 并且可以解决所有问题。哇哦！

我现在正在使用这个 hack 来实现可拖动图标，当拖动到链接的 Sortable 上时，这些图标显示为它们所代表的 DOM 元素！阅读源代码的额外荣誉；我试过了，现在我需要吃药。

很棒的解决方案。非常感谢。

我遇到了表之间的可排序问题，并且由于列数不同而使表调整大小，所以我使用了这个解决方案，而是使用return $('<tr><td colspan="999"></td></tr>')[0]; 来解决问题。

@Johannes 使用此代码，您可以设置与列数相关的 colspan：return $('<tr><td colspan="' + currentItem.children('td').length + '"> </td></tr>')[0];

【参考方案2】：

我发现了一种更骇人听闻的方法：可以使用start 选项来修改占位符元素，例如如下

$("#sortable").sortable(
    start: function (e, ui)  
      // modify ui.placeholder however you like
      ui.placeholder.html("I'm modifying the placeholder element!");
    
);

【讨论】：

我不知道是否发生了变化，但这对我有用，而 Alconja 没有。

我认为这根本不是 hackish；官方文档 (jqueryui.com/demos/sortable) 在概览部分显示 ui.placeholder，在事件部分显示 start 回调。我会说这是官方支持的方式。

同意，OP 描述的函数形式会很好，但在它进入项目之前，我认为这是实现目标的认可方式。

注意：这个方法只更新占位符的内容，不会改变占位符元素本身（属性/类/...）Alconja的方法让你完全控制。

@ezwrighter 如果你打电话给ui.placeholder.html()，当然可以。但是ui.placeholder 是实际的占位符元素。你可以用它做任何你可以用任何其他元素做的事情，包括样式化它或向它添加内容。