jQuery UI draggable Options snapMode

Snap mode sets draggable elements which sides of elements will snap to, there
are three values available "inner", "outter" and "both"
$("#eleID").draggable({ snapMode: "inner"  });

Try to drag squares close to each other, to see the difference between all possible values of snap mode.


Related option
snapsnap tolerance
ExampleJquery ui draggable options snapmode
Source Code Expand
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>


<!-- CSS -->
<style type="text/css">
.drag {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 10px;
    text-align: center;
    background-color: lightpink;
    position: relative;
}

.container {
    background-color: lightblue;
    width: 500px;
    height: 400px;
    border: 1px solid black;
    float: left;
    margin-right: 30px;
}
</style>


<!-- Javascript -->
<script>
    $(function () {
        $(".drag").draggable({
            containment:"#c1",
            snap: true,
            snapMode: "inner"
        });
        
       
        $("input").click(function(){
        	$(".drag").draggable("option", "snapMode", $(this).val());        
            $("#info").html($(this).val());
        });
    });
</script>

<!-- HTML -->
Select snap mode : <span id="info" style="color:red">inner</span>
<input id="btnInner" type="button" value="inner">
<input id="btnOutter" type="button" value="outter">
<input id="btnBoth" type="button" value="both">
<br>
<div id="c1" class="container">    
    <div id="drag1" class="drag" style="left:20px;top:20px;">drag me</div>
    <div id="drag2" class="drag" style="left:20px;top:50px;background-color:lightgray">drag me</div>
</div>
<div style="clear:both"/>


comments powered by Disqus