当我们使用jQuery UI中的Droppable组件时,可以为每一个Droppable元素指定一个可选的scope选项。这个选项用于确定哪些Draggable元素可以在当前的Droppable元素中被放置。
scope选项的具体用法可以有两种方式,分别是全局使用和局部使用。
全局使用scope选项
如果我们想使得某一个Draggable元素只能够在特定的Droppable元素内被放置,可以在全局中定义一个scope选项。代码如下:
$(function() {
$( "#draggable1" ).draggable({
scope: "restricted"
});
$( "#draggable2" ).draggable({
scope: "restricted"
});
$( "#draggable3" ).draggable({
scope: "not_restricted"
});
$( "#droppable1" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
scope: "restricted",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable2" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
scope: "not_restricted",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
在上述代码中,我们分别定义了三个Draggable元素和两个Droppable元素。其中,draggable1和draggable2使用了同一个scope:”restricted”选项,表示它们只能在拥有该选项的Droppable元素中被放置。而draggable3则使用了scope:”not_restricted”选项,表示它可以被放置在任何默认Droppable元素中。同理,droppable1和droppable2也分别指定了scope选项。
局部使用scope选项
除了在全局中使用scope选项,我们还可以在每一个Droppable元素内指定它的scope选项。示例代码如下:
$(function() {
$("#draggable-1").draggable();
$("#draggable-2").draggable();
$("#draggable-3").draggable();
$("#droppable-A").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
scope: "group-A",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped on A!");
}
});
$("#droppable-B").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
scope: "group-B",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped on B!");
}
});
$("#droppable-C").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
scope: "group-C",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped on C!");
}
});
});
在这个例子中,我们同样定义了三个Draggable元素和三个Droppable元素。不同的是,每个Droppable元素内都指定了不同的scope选项,分别为group-A、group-B和group-C。这样一来,只有在相同的scope选项下,Draggable元素才能被放置在对应的Droppable元素内。
通过上述两个示例,我们可以发现,Droppable组件中的scope选项与Draggable组件的scope选项用法类似,但使用场景不同。可以根据自己的实际需求选择合适的方式来应用。