0

我正在使用 jquery draggable 将内容拖放到作为编辑器一部分的表格单元格上。我们允许用户直接将内容拖放到各自的 td 中，并使用模板来创建打印和电子邮件。

每当用户拖动编辑器的表格单元格时，就会显示一个带有替换拆分和添加选项的 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 中不起作用。

而且我无法将 td 的内容包含在其他具有相对位置的 div 中，如建议的Here和Here。这样做的原因是我不确定 td 的 dom 有多复杂，因为我们允许用户完全自定义其中的内容。

链接到小提琴

虽然在 Chrome 中完美运行。还有其他解决方案吗？

4

4 回答 4

2

<table> <tr> <td> </td></tr> </table>尝试将 div 设计为表格，而不是使用。

供您参考http://snook.ca/archives/html_and_css/getting_your_di。在此尝试您的代码之后，它可能会帮助您。

将 div 设计为表格是最好的方法。这也可以用于响应式设计。

于 2013-11-12T11:57:23.230 回答
1 
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
    <h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br>            <br>            <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>   
        <div class="contentdiv"> </div>

        </td>

你已经给了绝对位置 <div class="contentdiv"> </div>

删除这个的绝对位置并将<h1>其放在上面的绝对位置添加到<div class="contentdiv"> </div>.

我已经检查过了。它运行良好。

http://jsfiddle.net/qfquj/69/

The following are I modified.

    removed absolute position for 

.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;

    top:0;
    opacity:.6

 }

    and added inline css for h1

     <h1 style="position:absolute;">
于 2013-11-12T12:47:42.180 回答
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 岁的壁虎虫。

例如，您可以通过从表格结构恢复并display: inline-block在单元格上使用来解决此问题，或者在表格单元格周围放置另一个相对 div。

于 2013-11-14T15:13:46.197 回答