Question

我一直在为一些单元格创建一个选择框，选择框是绝对的，所以它可以到达它需要的任何地方，在一些单元格周围创建一个单击并拖动框。

似乎根据mousedown事件，对于hour类正确设置了框的位置，但对half-hour没有设置。虽然它是相同的代码，hour偏移量将返回该项目的corrdinates。相对于文档，而half-hour将返回大约（0,6），它设置顶部：左侧到右上角。

现在，我的dom看起来像这样：

<div class="row">
  <div class="cell hour">
    <div class="half-hour"></div>
    <div class="half-hour"></div>
  </div>
</div>

，CSS是：

.hour{
  position:relative;
}
.half-hour{
  display:inline-block;
  float:left;
  width: 50%;
  height: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: solid 1px black;
  width: 20px;
  text-align: center;
  cursor: pointer;
}

从它的外观来看，我在选择half-hour时得到的偏移量是父hour的偏移量，hour我认为是他的相对页面？

在看完这些之后，我在考虑将half-hour设置为：* position：relative;`可以做到这一点，但它没有做任何事情。它是一样的。

我想我需要修改一些东西。我只是不确定是什么。

我最终将为名为quarter-hour的类做同样的设计，每个half-hour div中都有2个。

根据下面的问题

编辑，我只是简单地说：`在页面上，然后在mousedown上它会：

1-设置顶部：基于mouse.target.offsetTop＆amp;＆amp;的左值。 mouse.target.offsetLeft分别。

2-设置绝对位置（虽然它应该已经存在）

3-设定尺寸，相应的高度和宽度。

编辑2 我设法用这个小提琴重建我的问题https://jsfiddle.net/838vqboe/我目前在DDL中提供3个选项。小时按预期工作，但不是HH或QH。

Answer 1

我最终提出了一个在Javascript中运行的解决方案，但是当它转换为Dart时，特别是使用Polymer，shadowdom背后的概念对我来说是陌生的。我认为这是我遇到的问题，因为当鼠标给我相对于屏幕的位置时，它正在确定应用位置的本地根。

为了解决这个问题，我注意到扩展了PolymerElement的东西得到了getBoundingClientRect（），所以我最终在javascript中做了类似下面的事情：

var _mouseDown = function(e){
  var selectedHtml = e.target;
  var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left
  var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top 
  _selectionDiv.css({left:left, top:top});
}
$selection.on("mousedown", _mouseDown);

和Dart：

Function _mouseDown(MouseEvent mouse){
  HtmlElement selectedElement =- mouse.target;
  var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left;
  var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top ;
  _selectionDiv.style.top = "${top}px";
  _selectionDiv.style.left = "${left}px";
}

单击时，每个项目的偏移量似乎有很大差异

1 个答案: