jquery draggable和droppable - 停止继承父css

时间:2013-02-18 19:17:48

标签: javascript jquery css draggable droppable

这很难解释,但我的页面上有可拖动和可放置的元素。一些可放置的元素已经在其中具有可拖动的元素,但大多数都没有。

当您将鼠标悬停在可放置的悬浮物上时,会出现一个背景图像,因此您知道您的悬停在它上面。但是,当您将一个可拖动的移动到另一个可拖放时,现在将鼠标悬停在新移动的可拖动上,背景图像将出现在用于包含它的OLD droppable中。

如果你看这里你可以看到我的问题: - 尝试移动其中一个黄色框,然后在移动它之后将鼠标悬停在它上面。背景图像出现在初始位置。 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);}

基本上所有东西都有一个“空”类,当项目悬停时会显示背景图像。

1 个答案:

答案 0 :(得分:0)


问题是你的拖动元素是它来自div的子元素,因此当你将empty类分配给该元素时,因为你的拖动元素是那个didv的子元素,你的CSS规则{{1开始发挥作用。


要避免此问题,请在每个框中放入第二个div,如下所示:

  1. 使用类.empty:hover在div中添加一个新的div。

    所以这一行:(以及所有类似的)

    empty

    对此的更改:(我将其分解以便于阅读。)

    <div id="row-2col3" class="empty"><div class="position"></div></div>
    
  2. 然后将其添加到您的CSS:

    <div id="row-2col3" class="empty">
        <div class = "elementContainer">      <!-- This is added..-->
            <div class = "wordHolder"></div>  <!-- ...............-->
        </div>                                <!--................-->
        <div class="position"></div>
    </div>
    
  3. 最后,将您的CSS规则.elementContainer { position:relative; } .wordHolder { position:absolute; width:65px; height:65px; } 替换为.empty:hover,它应该有效!

  4.   

    工作原理及方法

    引用w3schools

      

    绝对位置元素相对于具有静态位置的第一个父元素定位。如果未找到此类元素,则包含块为elementContainer:hover

    因此,将<html>与相对属性集一起使用,可以作为我们使用类.elementContainer的绝对定位元素的容器。而且它们不会妨碍它们,因为它们被从常规流中移除而所有其他元素就像它不存在一样。

    您可以在此处详细了解定位元素:http://www.w3schools.com/css/css_positioning.asp

    希望这有帮助!