JQuery Draggable/Snap 限制区域

Question

如何限制"A"可以拖动到下面代码中的gameAreadiv区域？

我需要添加更多文字才能提交此问题。够了吗？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Permutations</title>
<style>
    body{
      font-family: sans-serif;
      font-size: 50px;
      color: green;
    }
    #gameArea{
      margin:20px auto;
      width: 600px;
      height: 400px;
      border: 4px solid green;
      background-color: cyan;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
    $( function() {
      $( "#draggable" ).draggable({ grid: [ 50, 50 ] });
    } );
</script>
</head>
<body>
    <div id="gameArea">
        <p id="draggable">A</p>
    </div>
</body>
</html>

Answer 1

您可以使用 .droppable() 作为 #gameArea 来确定放置位置的有效性，如下所示：

$(function() {
  $( "#draggable" ).draggable({ 
    grid: [ 50, 50 ],
    revert: "invalid"
  });
  $("#gameArea").droppable({
    accepts: "#draggable"
  });
});

Answer 2

嘿检查 Demo

$( function() {
     $( "#draggable" ).draggable({ containment: "parent" , grid: [ 50, 50 ] });
} );

并调整#draggable 的宽度 div ,

#draggable
{
    width:50px;
    height:50px;
}

JQuery Draggable/Snap 限制区域

JQuery Draggable/Snap Limit Area

jquery

drag