检查辅助克隆

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

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

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

Answer 1

1. 去 脚本 来源标签
2. 在Event Listener Breakpoints下的右侧面板中，在DOM Mutation下，选择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'); 

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

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

Answer 3

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

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

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

Answer 4

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

然后你可以自由地检查它的内容:)

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