Осмотреть клон помощника

Question

Я использую инструменты разработчика Google Chrome.Когда я хочу проверить элемент, я обычно щелкаю по нему правой кнопкой мыши и выбираю «проверить элемент».Это не работает для перетаскиваемых вспомогательных клонов.Мой код выглядит следующим образом:

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

Как я могу проверить вспомогательный клон, который создается только после того, как я начинаю перетаскивать элемент?

Answer 1

1. Перейти к Сценарий Источники вкладка
2. На правой панели под Точки останова приемника событий и под Мутация DOM выберите DOMNodeInserted

3.Когда происходит перетаскивание пользовательского интерфейса jQuery с помощью помощника клона, новый элемент DOM вставляется в дерево DOM.Этот элемент будет последним элементом перед body конечным тегом.затем инструмент разработчика прекратит работу документа, поскольку в нем есть точка останова для вставки элемента DOM.

4.Теперь вы можете проверить клонированный элемент и отредактировать CSS или около того ...

Примечание. Похоже, что эти точки останова не очень хорошо работают в Mac.

Попробуйте здесь: http://jsbin.com/ijacet/2

ОБНОВЛЕНИЕ:

Теперь вы можете прервать вставку узла, щелкнув правой кнопкой мыши на элементе:

Answer 2

jQueryUI создаст точную копию перетаскиваемого элемента.Поэтому вам не нужно проверять перетаскиваемый объект, но вы можете осмотреть перетаскиваемый элемент.

Используя опцию appendTo () в перетаскиваемом элементе, вы даже сможете определить местоположение, в которомDraggable будет введен в.(http://jqueryui.com/demos/draggable/#option-appendTo)

Делая это вручную (поэтому поместив код туда вручную, в контейнер, в котором вы хотите), вы можете проверить реальный объект.

Answer 3

Просто сгенерируйте исключение изнутри некоторого кода, который срабатывает во время перетаскивания - это убьет js, который стирает перетаскиваемый элемент, когда вы отпустите кнопку мыши, и заморозит перетаскиваемый объект в том месте, где оно было на экране, когда возникло исключение.

Тогда вы можете просмотреть его в своем сердце:)

Самый простой способ - создать исключение, когда вы пытаетесь бросить элемент на выпадающий элемент, как обычно я это делаю..

Answer 4

Насколько я знаю, ты не можешь. Вы можете (только для целей тестирования) явно клонировать его и добавить в документ. Тогда вы можете проверить клон, как и любой другой элемент. Что-то вроде этого, вероятно, достигнет этого:

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

Теперь клон должен появиться в нижней части тела документа, и вы сможете выбрать его с помощью мыши в режиме инспектора.

В зависимости от того, что вы пытаетесь выяснить, это может дать или не дать вам достаточно информации для экстраполяции того, на что будет похож автоматически созданный клон draggable.