Question

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

此外，.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 UI draggable只调整元素的样式，它不会改变它在DOM中的位置，所以.item将始终是第一个可拖动的子项，因为你已经指定了CSS :hover伪选择器 - .droparea:hover，你会一直在拖动第一个droppable，因为你正在徘徊它的孩子。
我们可以通过使用draggable的hoverClass选项在悬停时设置highlight类来解决此问题，但由于您在highlight事件期间删除了drag，将立即删除悬停时设置的类。所以我们不应该在拖动上删除这个类。
最后，您可以使用jQuery UI的position()实用程序方法在drop上对齐项目。

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

$(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，你甚至可以避免手动指定保证金。

仅突出显示悬停的丢弃物或丢弃的物品

1 个答案: