检查助手克隆

Question

我使用的是Google Chrome开发者工具。当我想检查一个元素时，我通常右键单击它并选择“inspect元素”。这对于可拖动的帮助程序克隆不起作用。我的代码如下：

$myElement.draggable({helper: 'clone'});

如何检查仅在我开始拖动元素后创建的辅助克隆？

Answer 1

1. 转到脚本 来源标签
2. 在事件监听器断点下的右侧面板中 DOM突变下，选择 DOMNodeInserted



3。当使用clone helper拖动jQuery UI时，会在DOM树中插入一个新的DOM元素。此元素将是body结束标记之前的最后一个元素。然后开发人员工具暂停操作文档，因为它有一个断点用于插入DOM元素。

4。现在你可以检查克隆元素并编辑CSS左右......

注意：看起来这些断点在Mac上不起作用。



在此处试试：http://jsbin.com/ijacet/2

更新：

现在，您可以通过右键单击元素来中断节点插入：

Answer 2

据我所知，你不能。您可以（仅用于测试目的）明确克隆它，并将其附加到文档中。然后你可以像任何其他元素一样检查克隆。这样的事情可能会实现这一点：

var tempElement = $myElement.clone();
tempElement.appendTo('body');

现在，克隆应该出现在文档正文的底部，您应该能够在Inspector模式下用鼠标选择它。

根据您想要弄清楚的内容，这可能会或不会为您提供足够的信息来推断可拖动自动创建的克隆的外观。

Answer 3

jQueryUI将创建可拖动项的精确副本。因此，您无需检查拖动的项目，但可以检查正在拖动的项目。

使用draggable中的appendTo（）选项，您甚至可以定义可放置拖动的位置。 （http://jqueryui.com/demos/draggable/#option-appendTo）

手动执行此操作（将代码放在手中，放在您喜欢的容器中），您可以检查实际对象。

Answer 4

从拖动时触发的某些代码中抛出一个异常 - 当释放鼠标按钮时，这会杀死擦除可拖动元素的js，并在异常发生时冻结拖动它在屏幕上的位置。

然后你可以自由地检查它的内容：）

当您尝试将元素放在dropable上时，简单的方法是抛出异常，这就是我通常的做法。