如果可拖动项在放置区附近放置，则让拖放合并

编程问答 2022-05-07

问题描述

我做了一个简单的游戏，你必须匹配正确的数字。当您拖动阴影图形附近的图形时，它们会匹配。我想这样做，如果您将正确的图形拖到正确的阴影中，它们将完美融合。如果您打开代码片段并尝试游戏，您会看到如果您将正方形的一半拖入 shasow 正方形内，游戏将接受它（视为好）。

$(document).ready(function() {
  $(".selectable").draggable({
    addClasses: false,snap: true,stack: ".destination",scroll: false
  });

  $(".destination").draggable({
    snapMode: "inner"
  });

  $(".destination").draggable("disable");

  $(".destination").droppable({
    drop: function(event,ui) {
      var selectedShape = ui.draggable.attr("id");
      var dropZone = $(this).attr("id");
      dropZone = dropZone.replace("inside","");
      if (selectedShape == dropZone) {
        $("#" + selectedShape).draggable("disable");
        checkShapestatus();
      } else {
        
        alert("Wrong choice!");
      }
    }
  });
});

function checkShapestatus() {
  var counter = 0;
  $(".selectable").each(function() {
    var $thisId = $(this);
    var booleanValue = $thisId.draggable('option','disabled');
    if (booleanValue) {
      counter = counter + 1;
    } else {

    }

    if (counter == 4) {
      win.play();
    }

  })
}
#square {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 8%;
  z-index: 1;
}

#circle {
  width: 100px;
  height: 100px;
  background: blue;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  z-index: 2;
}

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
  z-index: 3;
}

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  z-index: 4;
}

#squareinside {
  width: 100px;
  height: 100px;
  background: gray;
}

#circleinside {
  width: 100px;
  height: 100px;
  background: gray;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

#triangle-upinside {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid gray;
}

#pacmaninside {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid gray;
  border-left: 60px solid gray;
  border-bottom: 60px solid gray;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

body {
  background-color: bisque;
  overflow: hidden;
}

#centerText {
  font-family: 'Rock Salt',cursive;
  font-size: xx-large;
  style="width:100%;
 height: 100%;
  z-index: 0;
  text-align: center;
  margin-top: 2%;
}

.grid-1 {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Shape Matching</title>
  <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <link href="style.css" rel="stylesheet">
  <script src="script.js"></script>
</head>

<body>

  <div class="grid-1">
    <div id="pacmaninside" class="destination"></div>
    <div id="triangle-upinside" class="destination"></div>
    <div id="circleinside" class="destination"></div>
    <div id="squareinside" class="destination"></div>
  </div>

  <div class="grid-2">
    <div id="square" class="selectable"></div>
    <div id="circle" class="selectable"></div>
    <div id="triangle-up" class="selectable"></div>
    <div id="pacman" class="selectable"></div>
  </div>

</body>

</html>

如果有人可以更改代码并将其放在这里，我将不胜感激。

解决方法

可以查看dropzone和dropzone的坐标：

$(document).ready(function() {
  $(".selectable").draggable({
    addClasses: false,snap: true,stack: ".destination",scroll: false
  });

  $(".destination").draggable({
    snapMode: "inner"
  });

  $(".destination").draggable("disable");

  $(".destination").droppable({
    drop: function(event,ui) {
      var selectedShape = ui.draggable.attr("id");
      var dropZone = $(this).attr("id");
      dropZone = dropZone.replace("inside","");
      var destPos = ui.draggable.position(),selPos = $(this).position();

      if (selectedShape == dropZone && selPos.left == destPos.left && selPos.top == destPos.top) {
        $("#" + selectedShape).draggable("disable");
        checkShapeStatus();
      } else {
        
        alert("Wrong choice!");
      }
    }
  });
});

function checkShapeStatus() {
  var counter = 0;
  $(".selectable").each(function() {
    var $thisId = $(this);
    var booleanValue = $thisId.draggable('option','disabled');
    if (booleanValue) {
      counter = counter + 1;
    } else {

    }

    if (counter == 4) {
      win.play();
    }

  })
}
#square {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 8%;
  z-index: 1;
}

#circle {
  width: 100px;
  height: 100px;
  background: blue;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  z-index: 2;
}

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
  z-index: 3;
}

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  z-index: 4;
}

#squareinside {
  width: 100px;
  height: 100px;
  background: gray;
}

#circleinside {
  width: 100px;
  height: 100px;
  background: gray;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

#triangle-upinside {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid gray;
}

#pacmaninside {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid gray;
  border-left: 60px solid gray;
  border-bottom: 60px solid gray;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

body {
  background-color: bisque;
  overflow: hidden;
}

#centerText {
  font-family: 'Rock Salt',cursive;
  font-size: xx-large;
  style="width:100%;
 height: 100%;
  z-index: 0;
  text-align: center;
  margin-top: 2%;
}

.grid-1 {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Shape Matching</title>
  <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <link href="style.css" rel="stylesheet">
  <script src="script.js"></script>
</head>

<body>

  <div class="grid-1">
    <div id="pacmaninside" class="destination"></div>
    <div id="triangle-upinside" class="destination"></div>
    <div id="circleinside" class="destination"></div>
    <div id="squareinside" class="destination"></div>
  </div>

  <div class="grid-2">
    <div id="square" class="selectable"></div>
    <div id="circle" class="selectable"></div>
    <div id="triangle-up" class="selectable"></div>
    <div id="pacman" class="selectable"></div>
  </div>

</body>

</html>

drag-and-drophtmljavascriptjquery-ui-draggable