15

「css グリッド レイアウト」 = https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

マウスが現在どの列/行にあるかを知るJavaScriptの方法を知っている人はいますか?

このようなものは、マウスが入っているセルを取得するための出発点だと思いますが、これは同じサイズのグリッドにのみ役立ちます。

MouseGridColumn = round(mouseX / ( gridContainerWidth  / gridTotalColumnsNumber ) )
MouseGridRow    = round(mouseY / ( gridContainerHeight / gridTotalRowsNumber    ) )

等しくないセルでこれを行う方法はありますか?

更新 1 - codepen の追加

grid-template-columns: 25% 50% 25%;これは、3 つのさまざまなパーセンテージの列幅 ( )、2 行、要素を含まないグリッド セル、および複数の行にまたがる要素を示す codepen です: http://codepen.io/anon/pen/NbeOXp

更新 2 - マウスがどのグリッド セルにあるかを調べてみます。

ここでは、マウスが入っているセルを検出するために、グリッドの各セルに非表示の要素を追加しました。ただし、現在の要素に対してのみ「auto」を返します。また、非表示の要素をグリッド IMO に追加する必要があるのはかなり不格好です。 .

http://codepen.io/anon/pen/gLZBZwヒント: マウスを使用してグリッドにカーソルを合わせます。

4

5 に答える 5

3

グリッド列の親にイベント リスナーを追加します。イベント委任と呼ばれます。必要event.targetに応じて、on hover イベントと for ループ内でev.target.parent element==document.querySelect("#parentElement")[index] Post all ur code html コードを比較して正確に記述することができます。

于 2016-12-17T13:42:54.923 に答える
2

グリッドのアイデアが常に同じサイズ (totalWidth/gridNumber) であるという場合、異なるサイズのグリッドのソリューションを探していると思います。要素だけで、1、2、5、またはそれ以上のグリッドがオーバーフローする可能性があります。グリッド番号の変更を検出するために少しオブジェクトを作成しました。何か誤解した場合は、コメントで説明してください。

http://codepen.io/devrafalko/pen/bBOQbo?editors=1011

gridDetect = {
  gridNum:12,
  currentGrid:null,
  callback:null,
  initGridDetect: function(fun){
    var b = this.detectGrid.bind(this);
    document.addEventListener('mousemove',b);
    this.callback = fun;
  },
  detectGrid: function(event){
    var w = document.body.clientWidth;
    var mouse = event.clientX;
    var limitMouse = mouse > w ? w:mouse;
    var getGridNumber = Math.floor(limitMouse/(w/this.gridNum));
    if(this.currentGrid!==getGridNumber){
      this.currentGrid = getGridNumber;
      this.callback(getGridNumber);
    }
  }
}


gridDetect.initGridDetect(function(grid){
  console.log(grid);
  //it's called when the grid is about change
  //do what you want here with grid argument
});

于 2016-12-17T15:05:52.283 に答える