javascript - 仅突出显示悬停或放置到的可放置项

Question

我想要做的是将包含 .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>

Answer 1

这里有几点需要注意:

• jQuery UIdraggable仅调整元素的样式，它不会改变其在DOM中的位置，因此.item将始终是第一个draggable的子元素，由于您已经指定了 CSS :hover 伪选择器 - .droparea:hover，因此在拖动时您将始终悬停在第一个 droppable 上，因为您悬停在它的子项上.
• 我们可以通过使用 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，您甚至可以避免手动指定边距。