jquery UI sortable: 如何改变“placeholder”对象的外观？

Question

jquery UI sortable: 如何改变“placeholder”对象的外观？

51

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

使用placeholder选项可以调整此元素，但它只能像此处描述的那样修改元素的类：http://jqueryui.com/demos/sortable/#options 我想更多地自定义此元素，例如通过向placeholder选项提供函数，以与向helper选项提供函数的方式相同。

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

- brahn

2个回答

53

我发现一种更加hackish的方法：可以使用start选项来修改占位符元素，例如：

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

- brahn

我不知道是否有什么改变，但这个方法对我有效，而Alconja的则无效。 - Kirk Woll

12

我不认为这是hackish的行为；官方文档（http://jqueryui.com/demos/sortable/）在概述部分展示了“ui.placeholder”，在事件部分展示了“start”回调函数。我认为这是官方支持的方法。 - Nathan Long

1

同意，OP所描述的函数形式确实不错，但在该形式被纳入项目之前，我认为这是实现目标的官方方式。 - Jon z

3

注意：此方法仅会更新占位符的内容，而不会更改占位符元素本身（属性/类别/...）。Alconja 的方法可以让您完全掌控。 - ezwrighter

如果您调用 ui.placeholder.html()，那么可以。但是 ui.placeholder 是实际的占位符元素。您可以像处理其他元素一样对其进行任何操作，包括样式化或添加内容。 - Kanmuri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alconja · Accepted Answer

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

例如，以下内容将创建一个包含单词“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中，你将得到“container”，它是包含所有选项、元素等和placeholder本身的对象。

请注意，这是一种未经记录的 hack，因此显然不受支持，并且可能会在下一个版本的jQuery UI中更改……但是，鉴于你已经打算直接编辑ui.sortable.js，它仍然可能对你有用。