博客

jQuery UI的Droppable scope选项

  • Post category:jquery

当我们使用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选项用法类似，但使用场景不同。可以根据自己的实际需求选择合适的方式来应用。

Tags: