0

jquery draggable を使用して、エディターの一部であるテーブル セルの内容をドラッグ アンド ドロップしています。ユーザーがコンテンツをそれぞれの tds に直接ドラッグ アンド ドロップし、テンプレートを使用して印刷物や電子メールを作成できるようにしています。

ユーザーがエディターのテーブル セルをドラッグするたびに、分割と追加を置き換えるオプションを含む div が表示されます。ここに画像の説明を入力

ホバーした td 内にこの div を追加しています。

  <tr>           
    <td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
          <h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
          <br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>   
         <div class="contentdiv" style="position: absolute;">
            This will show options replace/split/add new 
         </div>
    </td>    
   </tr>

問題は、この div の絶対位置が Firefox で機能しないことです。

そして、提案されているように、相対位置を持つ他の div 内に td の内容をラップすることはできませんHere and Here。この理由は、ユーザーが内部のコンテンツを完全にカスタマイズできるようにしているため、td の dom がどれほど複雑になるかがわからないためです。

フィドルへのリンク

ただし、Chromeでは完全に機能します。他のソリューションの人はいますか??

4

4 に答える 4

1

これがあなたの質問に対する答えです。これがお役に立てば幸いです。

http://jsfiddle.net/qfquj/73/

私が改造したのは、

Removed top:0  and added float:left

.contentdiv{
    height:200px;
    width:300px;
    background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
    color: black;
    background-size: 100% 100%;
    text-align: center;
    position:absolute;

    opacity:0.6;
    float:left;  
 }

Added inline css float left for <h1>
<h1 style="float:left">
于 2013-11-12T13:21:26.017 に答える
1

Firefox では、テーブルまたはテーブルdisplay: table-cellが含まれる場合は常に絶対配置に問題があり、テーブル セルが相対的な親として無視されます。

これは 13 歳のGecko バグです。

display: inline-blockたとえば、テーブル構造から元に戻してセルで使用するか、テーブル セルの周りに別の相対 div を配置することで、これを修正できます。

于 2013-11-14T15:13:46.197 に答える