Question

我希望有人可以帮我弄清楚我的观点。我有一些包含在div中的标签，这些标签是动态添加的，因此我随时都不知道会有多少标签。即便如此，如果我要有3个标签，就像这样：

<div class="tabs">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
</div>

我正在使用HTML5拖放功能。我想要做的是弄清楚我所拥有的当前标签是否大于或小于我所关联的标签，以便我可以在标签之前或之后删除它。我开始为我拥有的元素获取getBoundingClientRect（）的坐标，但我还没弄清楚如何确定我是否大于或小于我正在悬停的选项卡。例如，如果我拖动Tab 2，我怎么能弄清楚我是否超过Tab 3将其放在那里之后，或者如果我在Tab 1之前拖动它以将其放在那里。

这几乎可以归结为能够做一些我不擅长的数学，以及添加到我的jQuery代码中的逻辑，以了解删除当前标签的位置。

提前感谢您的帮助。

Answer 1

基于数学的方法可以找出你在哪里停留但需要为每个标签添加索引（动态或其他方式）：

class checkedInput implements ng.IDirective {
  public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
  public templateUrl = 'partials/directives/checked-input.html';
  public scope = { 
    model: "=",
    icon: "@",
    pholder: "@",
    type: "@",
    page: "@",
    num: "@",
    gstab: "=",
    gsrow: "=",
    tab: "=",
    isFaIcon: "="
  };
}

找到您当前悬停的标签：

<div class="tabs">
  <div class="tab" data-index="0">Tab 1</div>
  <div class="tab" data-index="1">Tab 2</div>
  <div class="tab" data-index="2">Tab 3</div>
</div>

Answer 2

人们说你不需要数学才能成为一名程序员。鹤鹤！

只需检查拖动div的左侧与目标div的中心（左侧+宽度）/ 2。如果它少了，那就是那个div的左边。如果它更高，那就是div的权利。

Answer 3

你是这样的：我做了一个例子，允许删除id 之前较大id 元素的元素。

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  // get id of dragging element
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  if (data > ev.target.id) {
    var parent = document.getElementsByClassName('tabs')[0]
    parent.insertBefore(
      document.getElementById(data), ev.target);
  }
}

<div class="tabs">
  <div class="tab" id="1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tab 1</div>
  <div class="tab" id="2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tab 2</div>
  <div class="tab" id="3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tab 3</div>
</div>

请参阅此处：http://www.w3schools.com/html/html5_draganddrop.asp

希望这有帮助。

jQuery选项卡查找定位

3 个答案: