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

可以使用.droppable()爲#gameArea來確定丟棄的位置的有效性，就像這樣：

$(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可拖拽/捕捉限制區域

回答

相關問題