JQuery Draggable/Snap Limit Bereich

Wie kann ich den Bereich begrenzen, in dem das "A" in den Codebereich von GameArea gezogen werden kann?JQuery Draggable/Snap Limit Bereich

Ich muss mehr Text hinzufügen, um diese Frage einreichen zu können. Ist das genug?

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

Quelle

2016-07-29 Robin

Hey überprüfen Sie die Demo

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

und die Größe der Breite des #draggable div,

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

Quelle

2016-07-29 21:46:45 Diptox

Sie können .droppable() verwenden für die #gameArea die Gültigkeit der Fallposition zu bestimmen, etwa so:

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

Quelle

2016-07-29 21:45:27 mhodges

hey er muss nur den Container hinzufügen: {containment: "parent"} – Diptox

Ja, gute Lösung. Ich habe +1 gegeben. Dies funktioniert auch, solange # draggable kein Kind von #gameArea ist – mhodges

ja oder er kann den Eltern mit der #ID des Elements ersetzen, das er als Container haben soll – Diptox

Antwort

Verwandte Themen