如何使用可拖动的DIV添加类

Question

我有可拖动的元素，我想在顶部（点击或拖动）获得边框。 addClass不起作用。我不知道为什么......需要你的帮助，谢谢！ jsFiddle：jsFiddle

$(document).ready(function() {
  $('#box1, #box2, #box3, #box4').draggable({
    stack: "div",
    distance: 0
  });

  $('#dragZone div').click(function() {
    $(this).addClass('border').removeClass('noborder');
    $(this).siblings().removeClass('border').addClass('noborder');
  });
});

Answer 1

您可以对元素bind mouseUp事件。

$(document).ready(function() {

  $('#box1,#box2,#box3,#box4').draggable({
    stack: "div",
    distance: 0
  }).bind('mouseup', function() {
    $(this).addClass('border').removeClass('noborder');
    $(this).siblings().removeClass('border').addClass('noborder');
  });
});

#box1 {
  width: 150px;
  height: 150px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0
}

#box2 {
  width: 150px;
  height: 150px;
  background-color: green;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 0
}

#box3 {
  width: 150px;
  height: 150px;
  background-color: yellow;
  position: absolute;
  top: 50px;
  left: 100px;
  z-index: 0
}

#box4 {
  width: 150px;
  height: 150px;
  background-color: blue;
  position: absolute;
  top: 70px;
  left: 200px;
  z-index: 0
}

.border {
  border: solid 5px black;
}

.noborder {
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id="dragZone">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>