JQuery 드래그 가능/스냅 제한 영역

"A"를 아래 코드의 gameArea div에 드래그 할 수있는 영역을 어떻게 제한 할 수 있습니까?JQuery 드래그 가능/스냅 제한 영역

이 질문을 제출하려면 추가 텍스트를 입력해야합니다. 이것이 충분하나요?

<!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>

출처

2016-07-29 Robin

어이 Demo

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

을 확인하고 폭의 크기를 조정 #draggable div,

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

출처

2016-07-29 21:46:45 Diptox

당신과 같이 드롭 위치의 유효성을 확인하기 위해 #gameArea에 대한 .droppable()를 사용할 수 있습니다

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

출처

2016-07-29 21:45:27 mhodges

컨테이너를 추가하기 만하면됩니다. {containment : "parent"} – Diptox

예, 좋은 해결책입니다. 나는 +1했습니다. #draggable이 #gameArea – mhodges

의 자식이 아니거나 부모를 # 컨테이너로 사용하려는 요소의 #ID로 바꿀 수있는 경우에도 마찬가지입니다. – Diptox

JQuery 드래그 가능/스냅 제한 영역

답변

관련 문제