2013-04-08 5 views
1

我在玩jQuery和拖放功能。我有一個div在CSS中設置爲hidden。當激活拖動元素時,應通過將display設置爲inline(這是默認值)來顯示droppable元素。將顯示設置爲無時顯示div

然而,display: inline;不會推翻display: none;。如何做到這一點(通過jQuery或CSS)?

我當前的代碼:

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Droppable - Visual feedback</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <style> 
    #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } 
    #droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; } 
    .droppable-highlight { display: inline; } 
    h3 { clear: left; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable2").draggable(); 
    $("#droppable").droppable({ 
     accept: "#draggable2", 
     activeClass: "droppable-highlight", 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<h3>Feedback on activating draggable:</h3> 

<div id="draggable2" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" > 
    <p>Drop here</p> 
</div> 


</body> 
</html> 

Tinker.io鏈接:http://tinker.io/bf197

+1

這是因爲ID選擇是更具體的比類選擇(因此需要更高的優先級)。你將不得不通過'.css()'方法來設置它。 – Terry 2013-04-08 09:09:56

+0

@Terry你能告訴我這是怎麼完成的嗎?我想在'droppable()'部分。我對此很新。 – Devator 2013-04-08 09:12:02

+0

@Devator:據我所知,問題在於這個類沒有被添加(我只是爲了這個實驗處理了特殊性問題 - 將CSS規則的選擇器更改爲了##droppable.droppable-highlight ')。但是看着Chrome的開發工具中的元素,我沒有看到這個類被添加到droppable中,儘管在文檔中我認爲應該發生什麼。 – 2013-04-08 09:15:08

回答

4

的問題是,當可放開隱藏在jQuery UI的代碼不加入的類可放開(有display: none )。它確實如果它添加它可見。

這裏有一個更新的修補匠無display: nonehttp://tinker.io/bf197/1

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; } 
#droppable.droppable-highlight { border-color: red; display: block; } 

如果您在Chrome的開發工具觀看或類似的,你會看到該類得到補充(和邊框變爲紅色)。

不過看這一個與display: none再次:http://tinker.io/bf197/2

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; } 
#droppable.droppable-highlight { border-color: red; display: block; } 

如果您在開發工具看,班裏從來沒有被添加。顯然,如果jQuery UI不可見,它將忽略該droppable。

您可能需要將此作爲jQuery UI團隊的問題提出,因爲代碼似乎明確檢查了這種情況。

我沒有找到一個部分解決方法:使用visibility而不是displayhttp://tinker.io/bf197/3

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; visibility: hidden; } 
#droppable.droppable-highlight { visibility: visible; } 

這樣的作品,但當然,具有與visibility: hidden元素仍然消耗它們的佈局空間問題。

您可以刪除佈局元素沒有使它display: none和得到的效果,你想:http://tinker.io/bf197/5

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 40px; position: absolute; left: -10000px; } 
#droppable.droppable-highlight { border-color: red; position: static; } 

,通過在正常的情況下,元件定位關閉頁,但隨後替代在定位工作當它有課。除了黑客jQuery UI代碼之外,我認爲這與您將要獲得的display: none行爲非常接近。


其他說明:

  • 我上面所以這是不夠具體的規則選擇更新,因爲否則的ID選擇的特異性outrules類選擇的特異性。

  • div的默認display值是block而不是inline

+0

感謝您的全面解答。你知道**任何**解決方法來使'display'工作,而不是'visibility'?設置完全不同的課程不是問題。 – Devator 2013-04-08 10:30:38

+0

@Devator:我確實想出了一個更進一步的想法,我已經將它添加到答案中。它應該在功能上與'display:none'用戶體驗相同,即使該元素從未實際隱藏(只是關閉頁面)。 – 2013-04-08 10:35:29

+0

乾杯,更好的工作:-)然而有一個(次要)的問題,因爲這個。看看[這個鏈接](http://tinker.io/bf197/6)。當你拖動'div'時,你會看到'div'向下移動,所以鼠標的位置不再準確。在我的應用程序中這是一個相當的問題。你有什麼聰明的想法來解決這個問題嗎? – Devator 2013-04-08 10:49:26

1

這是因爲CSS preference rules

考慮下面的代碼:

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; } 
.droppable-highlight { display: inline; } 

第一個是一個id選擇器,這是比第二個(一類選擇器)更具體。更改.droppable-highlight#droppable.droppable-highlight會做的伎倆:)

你也需要,因爲當你放手droppable-highlight類已被除去#droppable.ui-state-highlight這樣做。

其次,當一個元素是display:none時,它不佔用屏幕上的空間,並且不能「拖放」到它上面。相反,使用visibility

所以,最終的代碼是:

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Droppable - Visual feedback</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <style> 
    #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } 
    #droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; visibility:hidden; } 
    #droppable.droppable-highlight { border-color: red; visibility:visible; } 
    #droppable.ui-state-highlight { border-color: red; visibility:visible; } 
    h3 { clear: left; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable2").draggable(); 
    $("#droppable").droppable({ 
     accept: "#draggable2", 
     activeClass: "droppable-highlight", 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<h3>Feedback on activating draggable:</h3> 

<div id="draggable2" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" > 
    <p>Drop here</p> 
</div> 


</body> 
</html> 

http://tinker.io/bf197/4

+0

感謝您的回答!雖然我真的在尋找'display'而不是'visibility''(因爲'visibility'仍然佔用佈局空間)。 – Devator 2013-04-08 10:31:29

+0

@Devator:然後使用絕對定位。 – Manishearth 2013-04-08 11:55:48

相關問題