jQuery UI draggable Options scope

Draggable option scope is used to group draggable and droppable items, once scope is set,
draggable items can only drop on droppable items which have same scope value. What option
scope does is similar to droppable accept.
$("#eleID").draggable({ scope: "first"  });

There are two sets of squares, one set is draggable, the other is droppable, they have been set with option scope,
try to drag squares onto those who has same scope value.
ExampleJquery ui draggable options scope
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">
.square {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin-bottom: 5px;
    margin-left: 5px;
    text-align: center;
    line-height: 100px;
    float: left;
    background-color: lightblue;
    cursor: pointer;
}

.squaredotted {
    width: 150px;
    height: 150px;
    border: 1px dotted gray;
    margin-bottom: 5px;
    margin-left: 5px;
    text-align: center;
    line-height: 150px;
    float: left;
    background-color: lightgray;
}
</style>


<!-- Javascript -->
<script>
    $(function () {
        $("#dragFirst").draggable({
        	scope: "first"
        });
        
        $("#dragSecond").draggable({
        	scope: "second"
        });
        
        $("#dropFirst").droppable({
            scope: "first",            
            drop: function (event, ui) {
                $(this).css("background-color", "lightgreen")
            },
            over: function (event, ui) {
                $(this).css("background-color", "green")
            },
            out: function (event, ui) {
                $(this).css("background-color", "")
            }
        });
        
        $("#dropSecond").droppable({
            scope: "second",            
            drop: function (event, ui) {
                $(this).css("background-color", "lightgreen")
            },
            over: function (event, ui) {
                $(this).css("background-color", "green")
            },
            out: function (event, ui) {
                $(this).css("background-color", "")
            }
        });
        
    });
</script>

<!-- HTML -->
<div style="margin-bottom:10px;">Drag and drop blue Scope:first to 'gray Scope:first', blue Scope:second to 'gray Scope:second'</div>
<div style="float:left">
    <div id="dragFirst" class="square">Scope : first</div>          	
</div>
<div style="float:left">
    <div id="dragSecond" class="square">Scope : second</div>          	
</div>
<div style="float:left;margin-left:50px;">
    <div id="dropFirst" class="squaredotted">Scope : first</div>   	
</div>
<div style="float:left;margin-left:50px;">
    <div id="dropSecond" class="squaredotted">Scope : second</div>   	
</div>


comments powered by Disqus