仅突出显示悬停或放置到哪个项目的 droppable答案

【问题标题】：Highlighting only the droppable which is hovered or to which item is dropped仅突出显示悬停或放置到哪个项目的 droppable
【发布时间】：2014-10-28 14:19:34
【问题描述】：

我想做的是将包含.item 元素的.droparea 元素的边框颜色设置为蓝色。

.droparea 还有一个悬停效果，将边框颜色更改为蓝色。

因此，如果我将.item 元素移动到另一个.droparea，它应该自动将当前.droparea 的边框颜色更改为蓝色，并将之前使用的.droparea 的边框更改为默认颜色（黑色）。

$(document).ready(function() {
  $(".item").draggable({
    scroll: false,
    revert: 'invalid',
    stack: false,
    create: function() {
      $(this).data('position', $(this).position())
    },
    cursor: "pointer",
    start: function() {
      $(this).stop(true, true)
    },
    drag: function(event, ui) {
      $(".droparea").removeClass("highlight");
    }
  });
  $(".droparea").droppable({
    accept: ".item",
    drop: function(event, ui) {
      $(this).addClass("highlight").find("p");
      snapToMiddle(ui.draggable, $(this));
    }
  });
});

function snapToMiddle(dragger, target) {
  var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
  var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
  dragger.animate({
    top: topMove,
    left: leftMove
  }, {
    duration: 200,
    easing: 'linear'
  });
}

.item {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.droparea {
  width: 150px;
  height: 150px;
  float: left;
  margin: 2px;
  border: 1px solid #000;
  outline: 1px solid transparent
}
.highlight {
  border: 1px solid blue
}
.droparea:hover {
  border: 1px solid blue
}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<div class="droparea">
  <div class="item"></div>
</div>


<div class="droparea"></div>
<div class="droparea"></div>

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

这里有几点需要注意：

jQuery UI draggable 仅调整元素的样式，它不会改变其在DOM 中的位置，因此.item 将始终是第一个可拖动元素的子元素，并且由于您已指定CSS :hover伪选择器 - .droparea:hover，拖动时您将始终悬停第一个可放置对象，因为您将其悬停在它的子项上。
我们可以通过使用可拖动的hoverClass 选项将highlight 类设置为悬停来解决此问题，但是由于您在drag 事件期间删除了highlight，因此设置为悬停的类将立即被删除.所以我们不应该删除拖动类。
最后，您可以使用 jQuery UI 的 position() 实用方法在放置时居中对齐项目。

因此，您可以实现以下目标：

$(document).ready(function() {
  $(".item").draggable({
    scroll: false,
    revert: 'invalid',
    stack: false,
    cursor: "pointer",
  });
  $(".droparea").droppable({
    accept: ".item",
    hoverClass: "highlight",
    drop: function(event, ui) {
      var $this = $(this);
      $(".highlight").removeClass("highlight");
      $this.addClass("highlight");
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 200, "linear");
        }
      });
    }
  });
});

.item {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.droparea {
  width: 150px;
  height: 150px;
  float: left;
  margin: 2px;
  border: 1px solid #000;
  outline: 1px solid transparent
}
.highlight {
  border: 1px solid blue
}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<div class="droparea">
  <div class="item"></div>
</div>

<div class="droparea"></div>
<div class="droparea"></div>

另外，我要警告您，jQuery UI 和 CSS float 的历史很糟糕，如果您访问 bugs.jqueryui.com，这一点就很明显了。为此，您最好使用display:inline-block，您甚至可以避免手动指定边距。

【讨论】：