jquery перетаскивается, делая div, чтобы не выходить за рамки другого div - PullRequest
Новая
       6

jquery перетаскивается, делая div, чтобы не выходить за рамки другого div

0 голосов
/ 23 ноября 2018

Мне нужен перетаскиваемый div, чтобы не выходить за пределы второго фрейма div, пока мне удалось создать «столкновение», в основном возвращающее true или false, если перетаскиваемый div находится внутри фрейма другого div.Теперь дело в том, что я не могу заставить это работать, я пытался довести его до топора = 90 (пример), когда он попадает в кадр, и еще несколько примеров, но я просто не могу заставить это работать.Перетаскиваемый div не хочет возвращаться в позицию.

Вот JSFiddle: https://jsfiddle.net/kojaa/x80wL1mj/2/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Catch a ball</title>
</head>
<body>
    <div class="catcherMovableArea" id="catcherMovableArea">
        <div id="catcher" class="catcher"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

.catcherMovableArea {
    position: absolute;
    border: 1px solid black;
    width: 1900px;
    top: 90%;
    height: 50px;
}

.catcher {
    position: absolute;
    width: 250px;
    height: 30px;
    border-radius: 10px;
    background-color: black;
    top: 20%;
}


let catcher = $("#catcher");

$(document).mousemove(function(e) {
    catcher.position({
      my: "left-50% bottom+50%",
      of: e,
      collision: "fit"
    });

    let catcherOffset = $(catcher).offset();
    let CxPos = catcherOffset.left;
    let CyPos = catcherOffset.top;

    let catcherYInMovableArea, catcherXInMovableArea = true;

    while(!isCatcherYinMovableArea(CyPos)){
        catcherYInMovableArea = false;
        break;
    }

    while(!isCatcherXinMovableArea(CxPos)){
        catcherXInMovableArea = false;
        break;
    }
});

function isCatcherYinMovableArea(ypos){
    if(ypos < 849.5999755859375 || ypos > 870.5999755859375) {
        return false;
    } else {
        return true;
    }
}

function isCatcherXinMovableArea(xpos){
    if(xpos < 8 || xpos > 1655 ) {
        return false;
    } else {
        return true;
    }
}

1 Ответ

0 голосов
/ 24 ноября 2018

По умолчанию опция collision запрещает размещение элемента вне окна .Вы хотите предотвратить его перемещение за пределы определенного элемента.

Чтобы сделать это, используйте параметр within, чтобы выбрать, какой элемент следует использовать для содержания.

Пример: 

let draggable = $("#draggable");

$(document).mousemove(function(e) {
    draggable.position({
      my: "left-50% bottom+50%",
      of: e,
      collision: "fit",
      within: "#container"
    });
});
#container { width: 200px; height: 100px; border-style: solid }
#draggable { width: 50px; height: 50px; background-color: black }
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>

<div id="container">
  <div id="draggable"></div>
</div>
...