Осмотреть вспомогательный клон

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

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

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

Ответы

Ответ 1

  • Перейдите на вкладку Script Источники.
  • На правой панели в разделе Точки останова слушателя и в DOM Mutation выберите DOMNodeInserted

enter image description here

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

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

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

enter image description here

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

UPDATE:

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

enter image description here

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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