檢查助手克隆

我使用Google Chrome開發人員工具。當我想檢查一個元素時，我通常右鍵單擊它並選擇「檢查元素」。這對於可拖動的輔助克隆無效。我的代碼如下：檢查助手克隆

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

如何檢查只有在我開始拖動元素後才創建的幫助器克隆？

來源

2011-09-24 Randomblue

轉到腳本來源標籤
在右側面板中下事件監聽器斷點下DOM突變選擇DOMNodeInserted

enter image description here

3。當使用克隆助手的jQuery UI拖動時，DOM樹中會插入一個新的DOM元素。此元素將是body結束標記之前的最後一個元素。那麼開發人員工具會暫停操作文檔，因爲它具有插入DOM元素的斷點。

4。現在你可以檢查克隆的元素，並編輯CSS等...

注意：看起來這些斷點在Mac中不起作用。

enter image description here

嘗試在這裏：http://jsbin.com/ijacet/2

UPDATE：

現在你可以在節點插入右擊元素打破：

enter image description here

來源

2011-09-28 21:11:29 Mohsen

哇。你是如何將背景變成黑色的？ :) – Randomblue

有一個Custom.css文件，您可以編輯它。轉到C：\ Users \ |||| USERNAME |||| \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ User StyleSheets並對其進行編輯。或者使用我使用的這個CSS：https：//gist.github.com/1249280 – Mohsen

我已經完成了你所說的，但開發人員工具在拖動之後確實暫停了文檔... – Randomblue

據我所知，你不能。您可以（僅用於測試目的）明確地克隆它，並將其附加到文檔中。然後你可以像任何其他元素一樣檢查克隆。像這樣的東西可能會實現這一目標：

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

現在，克隆應該出現在文檔體的底部，你應該能夠用鼠標在檢查模式時，選擇它。

取決於你想要弄清楚什麼，這可能或不會給你足夠的信息來推斷可拖動的自動創建的克隆的外觀。

來源

2011-09-28 20:54:09 Lee

jQueryUI將創建可拖動項目的精確副本。因此，您不需要檢查拖動的項目，但可以檢查正在拖動的項目。

使用可拖動內容中的appendTo（）選項，您甚至可以定義可拖動對象將被放入的位置。（http://jqueryui.com/demos/draggable/#option-appendTo）

通過手動執行此操作（因此將代碼放置在您喜歡的容器中），您可以檢查實際對象。

來源

2011-09-28 20:54:54

只是從拖動時觸發的某些代碼中拋出一個異常 - 這會終止釋放鼠標按鈕時刪除可拖動元素的js，並在發生異常時凍結它在屏幕上的可拖動內容。

然後你可以隨意把它檢查你的心內容:)

最簡單的辦法是，當你試圖刪除一個dropable元素拋出一個例外，那就是如何我通常做。

來源

2011-09-28 20:56:58

檢查助手克隆

回答

相關問題