jquery可拖拽和droppable - 停止繼承父母css

這很難解釋，但我在我的頁面上有可拖動和可拖拽的元素。一些droppable元素已經有可拖動的元素，但大多數都沒有。jquery可拖拽和droppable - 停止繼承父母css

當您將鼠標懸停在可拖放的圖像上時，會出現背景圖像，以便您知道懸停在圖像上方。但是，當您將可拖動對象移動到另一可放置對象時，現在將鼠標懸停在新移動的可拖動對象上，會在用於包含它的舊對象拖放對象中顯示背景圖像。

如果你看看這裏，你可以看到我的問題： - 嘗試移動其中一個黃色框，然後移動它，然後將其懸停在它上面。背景圖像出現在初始位置。 http://liquidlizard.net/

誰能告訴我如何解決這個問題嗎？我會感激:)

編輯這裏的一些代碼我使用

<div id="row-2col0" class="empty"><div class="position"><a href class="bookmark" target="_blank"></a></div></div> 
<div id="row-2col1" class="empty"><div class="position"></div></div> 
<div id="row-2col2" class="empty"><div class="position"></div></div>

JS：

$('.draggable').draggable({start: function() {var initialposition = ???}}); 
$('.droppable').droppable({drop: handleDropEvent, accept:'.bookmark'}); 
function handleDropEvent(event, ui) { 

}

CSS：

.empty:hover{background-image:url(../img/tilehover.png);}

基本上一切有一個「空」類，它顯示了物品懸停時的背景圖像。

來源

2013-02-18 Zaphod Beeblebrox

這可能是因爲jQuery-UI緩存您的舊DOM對象。您可以在「更新」或「停止」（可拖動參數）上重新分配背景（css（））。 – 2013-02-18 19:21:13

請將您的代碼發佈到後代的問題中。 – Blazemonger 2013-02-18 19:21:57

@Allendar感謝您花時間回答。你能解釋多一點你的意思，但我是新來的JavaScript。我知道你的意思是關於更新和停止參數（我使用droppable的drop事件來做別的事情），但我不確定我是如何重新分配背景的？ – 2013-02-18 19:24:17

的問題是，你拖動的元素是它是從哪裏來的div一個孩子，所以當你的empty類分配給該元素，因爲你拖動的元素是didv的孩子，你的CSS規則，.empty:hover發揮作用。

爲了避免這個問題，把第二個div每個盒子裏面，像這樣：

添加一個新的div的div內與類empty。

所以這條線：（和所有喜歡它的那些）

<div id="row-2col3" class="empty"><div class="position"></div></div>

更改此：（我把它弄壞了下來，使其更易於閱讀。）

<div id="row-2col3" class="empty"> 
    <div class = "elementContainer">  <!-- This is added..--> 
     <div class = "wordHolder"></div> <!-- ...............--> 
    </div>        <!--................--> 
    <div class="position"></div> 
</div>

然後加入這對你的CSS：

.elementContainer { 
    position:relative; 
} 

.wordHolder { 
    position:absolute; 
    width:65px; 
    height:65px; 
}

最後，更換你的CSS規則.empty:hover與elementContainer:hover它應該工作！

如何以及爲什麼它的工作原理

引述w3schools，

絕對位置元素相對於定位於具有第一父元素靜態以外的位置。如果沒有找到這樣的元素，包含塊是<html>：

因此，使用.elementContainer與相對屬性組用作我方與類wordHolder絕對定位元素的容器。而且他們不妨礙，因爲他們被從正常流程中移除，而所有其他元素的行爲就好像它不存在一樣。

您可以在此處詳細瞭解定位元素：http://www.w3schools.com/css/css_positioning.asp

希望這有助於！

來源

2013-02-19 06:46:16 Stephen

jquery可拖拽和droppable - 停止繼承父母css

回答

相關問題