Jquery collision: draggable and target collision event

Question

I am using jQuery collision with draggable. I have code working to change the color of the target (the larger box) on drop. However, I would like it to change color as soon as the dragMe touches it.

Thanks in advance for your help!

Here's the code: https://jsfiddle.net/rebeccaoutofourmindsstudios/mgL968x4/2/

$(".dragMe").draggable({
  obstacle: ".obstacle",
  preventCollision: true,
  containment: "#moveInHere"
});

$(".obstacle").draggable({
  obstacle: ".dragMe",
  preventCollision: true,
  containment: "#moveInHere"
});

$(document).ready(function() {
  $("#dragMe").draggable({
    containment: ".moveInHere",
    obstacle: ".obstacle"
  });
  $("#obstacle").draggable({
    containment: ".moveInHere"
  });
  $("#Target1").droppable({
    tolerance: "touch",
    preventCollision: true,
    drop: dropItem
  });
});

function dropItem(ev, ui) {
  $("#Target1").css({
    background: "blue"
  });

}

#moveInHere {
  with: 500px;
  height: 500px;
  border: 1px solid black;
  background: #eee;
}

.dragMe {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background: #eee;
}

.obstacle {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background: #eee;
}

.target {
  postition: absolute;
  top: 100px;
  left: 200px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: #eee;
}






  
  
  
  
  
  


  
  
  

  
  




  
    Drag me...
    ...but not in here.
    I want to change color

user_2333214 · Answer

You can use the over event callback like this:

over: function(event, ui) {
    $(this).css('background', 'dodgerblue');
}

$(document).ready(function() {

  $(".dragMe").draggable({
    obstacle: ".obstacle",
    preventCollision: true,
    containment: "#moveInHere"
  });

  $(".obstacle").draggable({
    obstacle: ".dragMe",
    preventCollision: true,
    containment: "#moveInHere"
  });

  $("#Target1").droppable({
    tolerance: "touch",
    preventCollision: true,
    over: function(event, ui) {
      $(this).css('background', 'dodgerblue');
    },
    out: function(event, ui) {
      $(this).css('background', '#eee');
    },
    drop: dropItem
  });
});

function dropItem(ev, ui) {
  $(this).css({
    background: "blue"
  });
}

#moveInHere {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  background: #eee;
}

.dragMe {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background: #eee;
}

.obstacle {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background: #eee;
}

.target {
  position: absolute;
  top: 100px;
  left: 200px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: #eee;
}






  
  
  
  
  
  


  
  
  

  
  




  
    Drag me...
    ...but not in here.
    I want to change color

user_15377355 · Answer

Just use hoverClass: in the droppable definition (like mentioned in the jquery.ui documentation) and apply the background-color to that class.

Working example:

$(".dragMe").draggable({
    obstacle: ".obstacle",
    preventCollision: true,
    containment: "#moveInHere"
});

$(".obstacle").draggable({
    obstacle: ".dragMe",
    preventCollision: true,
    containment: "#moveInHere"
});

$(document).ready(function() {
  $("#dragMe").draggable({ containment: ".moveInHere", obstacle: ".obstacle" });
  $("#obstacle").draggable({ containment: ".moveInHere" });
  $("#Target1").droppable({
    hoverClass: "drop-hover",
    tolerance: "touch",
    preventCollision: true,
    drop: dropItem
  });
  });

function dropItem(ev, ui) {
    $("#Target1").css({ background: "blue" });
  
}

#moveInHere {
    with: 500px;
    height: 500px;
    border: 1px solid black;
    background: #eee;
}
.dragMe{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}
.obstacle{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}
.target{
    postition: absolute;
    top:100px;
    left:200px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: #eee;
}
.target.drop-hover{
    background-color: blue;
}







    Drag me...
    ...but not in here.
    I want to change color

Jquery collision: draggable and target collision event

2 Answers