0

まず最初に、私の英語でごめんなさい。純粋なJavascriptでドラッグ可能でサイズ変更可能なテーブル列を作成しようとしています。次の例に示すように、セル内に2つの領域を挿入しました。1つはドラッグ用（div）、2つ目はサイズ変更用（span）です。ChromeとFirefoxではすべて正常に動作しますが、IE8では正常に動作しません。

画像の「Column1」にあるように、divがセルに収まらず、セルの下にジャンプする場合、サイズ変更中に問題が発生します。プロパティ「overflow：hidden」で修正することをお勧めしますが、運がありません。

CSS：

.ui-column-resizable
{
  float:right;
  height:20px !important;
  display:inline;
  cursor:w-resize;
  position:relative;
  overflow:hidden;
  text-align:center;
  white-space:nowrap;
  background-color:blue;
  margin: -2px -2px -2px 0;
}


.ui-column-draggable
{
  height:17px;
  cursor:move;
  position:relative;
  overflow:hidden;
  background-color:yellow;
  white-space:nowrap;
  text-align:center;
}

JavaScript：

column.innerHTML = "<span class='ui-column-resizable'>&nbsp;</span>" + 
                    "<div class='ui-column-draggable'>" +  
                      column.innerHTML +
                    "</div>";

http://jsfiddle.net/A5kVs/2/

4

1 に答える 1

1

これでうまくいくはずです...

HTML：

<td>             
    <div class="drag">
        Column 1
        <div class="resize"></div>
    </div>
</td>

CSS：

.drag {
    position:relative;
    background-color:yellow;
    padding:1px 10px 1px 5px;
    cursor:move;
}

.resize {
    position:absolute;
    background-color:blue;
    right:0;
    width:5px;
    top:0;
    height:100%;
    cursor:w-resize;
}

ライブデモ： http： //jsfiddle.net/simevidas/5mzgP/3/

于 2011-03-14T13:15:02.113 に答える