javascript - JS障碍物和碰撞CSS事件不起作用

Question

我有障碍物（白色矩形）作为障碍物，但似乎无法为小灰色圆圈（“.draggable”/“#b”）接触绿色圆圈（“.trigger01”/ “#trigger01”）当“.draggable”与“.trigger01”碰撞时，我希望“.trigger01”hide/opacity: '0'

function isColliding(x, y, element2) {
  var e2 = {};
  e2.top = $(element2).offset().top;
  e2.left = $(element2).offset().left;
  e2.right = parseFloat($(element2).offset().left) + parseFloat($(element2).width());
  e2.bottom = parseFloat($(element2).offset().top) + parseFloat($(element2).height());

  if (x > e2.left && x < e2.right && y < e2.bottom && y > e2.top) {
    return true
  }
}
/////////////////////////////////
$('#b').draggable({
  function(event, ui) {
    var dropZone = $(this).data('target');
    var originalPosX = $(this).offset().left;
    var originalPosY = $(this).offset().top;

    if (event.collision(event.clientX, event.clientY, '.trigger01')) {
      $('.trigger01').css({
        opacity: '0',
      });
    }
  },
});
///////////////////////////////////////

function collidesWith(element1, element2) {
  var Element1 = $(".draggable");
  var Element2 = $(".trigger01");

  Element1.top = $(element1).offset().top;
  Element1.left = $(element1).offset().left;
  Element1.right = Number($(element1).offset().left) + Number($(element1).width());
  Element1.bottom = Number($(element1).offset().top) + Number($(element1).height());

  Element2.top = $(element2).offset().top;
  Element2.left = $(element2).offset().left;
  Element2.right = Number($(element2).offset().left) + Number($(element2).width());
  Element2.bottom = Number($(element2).offset().top) + Number($(element2).height());

  if (Element1.right > Element2.left && Element1.left < Element2.right && Element1.top < Element2.bottom && Element1.bottom > Element2.top) {
    $('.trigger01').css({
      opacity: '0',
    });
  }
}

/////////////////////////////


function clearCollision(event, ui) {
  $(".collision").remove();
}

function handleCollision(event, ui) {
  $(event.collision).addClass("collision").each(function() {
    var d = $(this).data("direction");
    if (d) $("<b>" + d + "</b>").appendTo($(this));
    $(this).appendTo("obstacle");

  });
}

function clearProtrusion(event, ui) {
  $(".protrusion").remove();
}

function handleProtrusion(event, ui) {
  $(event.collision).addClass("protrusion").each(function() {
    var d = $(this).data("direction");
    if (d) $("<b>" + d + "</b>").appendTo($(this));
    $(this).appendTo(".obstacle");

    collisionTrigger1();
  });


}



function collisionTrigger1(event) {
  if ($("#b").val() == "collision") {
    $(".draggable").css({
      opacity: '0.3',
    });
    $(".trigger01").css("display", "none");
  } else {
    $(".draggable").css({
      opacity: '1',
    });
  }
}
//keep this
$(function() {
  $(".draggable").each(function() {
    $(this).draggable({
      containment: "#board",
      obstacle: ".obstacle",
      preventCollision: true,
      restraint: ".restraint",
      preventProtrusion: true,
      directionData: "direction",
      relative: "body",
      collisionVisualDebug: false,


    });


  });
  //might not need


  //         $( "#b" ).bind( "precollision",  clearCollision );
  //           $( "#b" ).bind( "preprotrusion", clearProtrusion );
  //         $( "#b" ).bind( "collision",    handleCollision );
  //          $( "#b" ).bind( "protrusion",   handleProtrusion );
  //           $( "#trigger01" ).bind( "b",   collisionTrigger1 );

}); <
/script>

body {
  margin: 0px;
  padding: 0px;
}

#board {
  position: absolute;
  width: 450px;
  height: 290px;
  background-color: #de8895;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  top: 100px;
  left: 0px;
}

.draggable {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30px;
  height: 30px;
  background: #dddddd;
  border-radius: 15px;
  cursor: move;
  z-index: 40;
  transition: opacity .3s ease, transform .6s ease;
}

.obstacle {
  position: absolute;
  top: -10px;
  left: 0px;
  width: 90px;
  height: 100px;
  border-radius: 15px;
  background: white;
  transition: background .4s ease;
}

.restraint {
  position: absolute left: 30px;
  top: 100px;
  width: 450px;
  height: 210px;
  background-color: #eeeeee;
  margin-top: 30px;
}

#floss {
  position: absolute;
  top: -70px;
  left: -80px;
  width: 200px;
  height: 200px;
}

#trigger01 {
  position: absolute;
  top: 23px;
  left: 200px;
  width: 20px;
  height: 20px;
  background: #72b543;
  border-radius: 15px;
  cursor: move;
  z-index: 150;
}

.protrusion {
  background-color: transparent;
  pointer-events: none;
  position: absolute;
  border: 1px solid black;
  margin: -1px;
}

.collision {
  background-color: #00ffff;
  pointer-events: none;
  position: absolute;
}

#a {
  padding: 0px;
}

#c {
  margin: 0px;
}

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="http://outofourmindsstudios.com/2021/PitStop03/03_floss/jquery-1.8.3.min.js"></script>
  <script src="http://outofourmindsstudios.com/2021/PitStop03/03_floss/ui/jquery.ui.core.js"></script>
  <script src="http://outofourmindsstudios.com/2021/PitStop03/03_floss/ui/jquery.ui.widget.js"></script>
  <script src="http://outofourmindsstudios.com/2021/PitStop03/03_floss/ui/jquery.ui.mouse.js"></script>
  <script src="http://outofourmindsstudios.com/2021/PitStop03/03_floss/ui/jquery.ui.draggable.js"></script>
  <script src="http://outofourmindsstudios.com/2021/PitStop03/03_floss/jquery-collision.min.js"></script>
  <script src="http://outofourmindsstudios.com/2021/PitStop03/03_floss/jquery-ui-draggable-collision.min.js"></script>
  <script src="http://outofourmindsstudios.com/2021/PitStop03/03_floss/scriptFloss.js"></script>
</head>

<body>
  <div id="board">
    <div class="restraint"></div>
    <div class="draggable" style="left:50px; top: -60px;" id="b" data-target=".trigger01"></div>
    <div class="obstacle" style="left: 0px; top:20px;" id="a"></div>
    <div class="obstacle" style="left:120px; top:20px;" id="c"></div>
    <div class="obstacle" style="left:240px; top:20px;" id="c"></div>
    <div class="obstacle" style="left:360px; top:20px;" id="c"></div>
    <div class="obstacle" style="left: 0px; top:160px;" id="a"></div>
    <div class="obstacle" style="left:120px; top:160px;" id="c"></div>
    <div class="obstacle" style="left:240px; top:160px;" id="c"></div>
    <div class="obstacle" style="left:360px; top:160px;" id="c"></div>
    <div class="trigger01" id="trigger01"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

</body>
</html>

https://jsfiddle.net/rebeccaoutofourmindsstudios/z1f9unp7/1/#&togetherjs=fm9VAxwiKy

标签： javascriptjquerycsscollisionjquery-events