1

これを説明するのは難しいですが、私のページにはドラッグおよびドロップ可能な要素があります。ドロップ可能な要素の中には、既にドラッグ可能な要素が含まれているものもありますが、ほとんどの要素には含まれていません。

ドロップ可能アイテムにカーソルを合わせると、背景画像が表示されるので、その上にカーソルを置いていることがわかります。ただし、ドラッグ可能オブジェクトを別のドロップ可能オブジェクトに移動すると、新しく移動したドラッグ可能オブジェクトにカーソルを合わせると、以前はそれを含んでいた古いドロップ可能オブジェクトに背景画像が表示されます。

ここを見ると、私の問題を見ることができます。背景画像が初期位置に表示されます。 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);}

基本的に、アイテムにカーソルを合わせたときに背景画像を表示する「empty」クラスがあります。

4

1 に答える 1

0


問題は、ドラッグされた要素が元の div の子であるため、emptyその要素にクラスを割り当てると、ドラッグされた要素がその div の子であるため、CSS ルールが作用.empty:hoverすることです。

この問題を回避するには、次のように、各ボックス内に 2 つ目の div を配置します。

  1. class を使用して、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>

  2. 次に、これを CSS に追加します。

    .elementContainer {
    position:relative;
}

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

  3. そして最後に、CSS ルール.empty:hoverを次のように置き換えるとelementContainer:hover、機能するはずです!

どのように、なぜそれが機能するのか

w3schoolsを引用すると、

絶対位置要素は、静的以外の位置を持つ最初の親要素を基準にして配置されます。そのような要素が見つからない場合、含まれているブロックは<html>次のとおりです。

したがって.elementContainer、相対属性セットを使用すると、クラスで絶対配置された要素のコンテナーとして機能しますwordHolder。また、通常のフローから削除され、他のすべての要素が存在しないかのように動作するため、邪魔になりません。

配置要素について詳しくは、http ://www.w3schools.com/css/css_positioning.asp をご覧ください。

お役に立てれば！

于 2013-02-19T06:46:16.643 に答える