CODEWITHSUNDEEP
jqueryjquery-uidraggable
mauc
mauc

Reputation: 23

How to addClass with draggable DIVs

I have draggable elements which I want to get a border when on top (clicked or draged). addClass does not work. I have no clue why.... Need your help, thanks! 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');
  });
});

Upvotes: 0

Views: 81

Answers (1)

Carsten Løvbo Andersen
Carsten Løvbo Andersen

Reputation: 27041

You can bind a mouseUp event to the elements.

$(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>

Upvotes: 1

Related Questions