jQuery UI | draggable() 和 droppable() 方法

jQuery UI是方法和一组用户界面效果、小部件、交互和主题的混合体，可以使用 jQuery 方法在网页中提供。如果您想构建一个强大的 Web 应用程序，其中包含各种功能，例如拖放、日期选择器、工具提示等，那么 jQuery UI 是构建这些效果的完美选择。
在本文中，我们将学习各种 jQuery UI 交互。

Draggable() 方法

此方法允许在鼠标的帮助下拖动元素。使用jQuery UI，我们可以使DOM（d ocumentØbject中号奥德尔）元素视口内拖动任何地方。这可以通过用鼠标单击可拖动对象并将其拖动到视口内的任何位置来完成。
句法：
draggable() 方法有两种形式，每种形式的使用取决于需求。这些如下：-

$(selector, context).draggable (options);

$(selector, context).draggable ("action", [params]);

下表显示了可用于此方法的不同选项：

OPTION	PURPOSE
addClass	If the value of this option is set to false, it will prevent the DOM elements to be dragged . The default value this option is true.
axis	This option is used constrain the movement of the draggable object. If the value of this option is set to Y , then the object can be dragged in the vertical direction only and if the value of this option is set to X , then the object can be dragged into horizontal direction only.
containment	This option is also used constrain the movement of the draggable object within the specific region or some element.The default value this option is false.
opacity	This option is used to control the opacity of the draggable object while it is dragged.The default value this option is false.

例子：
在这个例子中，id=”d1″的

可以被拖动到视口内的任意位置，id=”d2″的

可以沿X轴拖动，id=”d3″的

可以被拖动沿 Y 轴拖动。
代码#1：

jQuery UI Draggable



#d1 { 
    width: 120px; 
    height: 120px; 
    background-color :aqua;
    padding:20px;
    float:left;
    margin:5px;
    }
#d2 { 
    width: 120px; 
    height: 120px; 
    background-color :orange;
    padding:20px;
    float:left;
    margin:5px;
    }
#d3 { 
    width: 120px; 
    height: 120px; 
    background-color :yellow;
    padding:20px;
    float:left;
    margin:5px;
    }






Welcome to GeeksforGeeks
Drag Me Anywhere
Drag Me Horizontally
Drag Me Vertically

$( function() {
    $("#d1").draggable();
} );
$( function() {
    $("#d2").draggable({axis:"x"});
} );
$( function() {
    $("#d3").draggable({axis :"y"});
} );


                                           

输出：
拖动前

拖动后

Droppable() 方法：

此方法允许在鼠标的帮助下删除元素。使用jQuery UI，我们可以使DOM（d ocumentöbject中号Odel等）元件与视口内的任何地方拖放到指定的目标。这可以通过用鼠标单击可拖动对象并将其放在指定目标上来完成。
句法：
droppable() 方法有两种形式，每种形式的使用取决于需求。这些如下：-

$(selector, context).droppable (options)

$(selector, context).droppable ("action", params)

下表显示了可用于此方法的不同选项：

OPTION	PURPOSE
accept	The value of this option specifies that which draggable objects can be dropped on the specified target. The default value of this option is *.
addClass	If the value of this option is set to false, it will prevent the DOM elements to be dropped . The default value this option is true.
disable	This option is also used to disable the dropppable property of the DOM element.If the value of this option is set to ture , then the object cannot be dropped and if the value of this option is set to false, then the object can be dropped on the specified target.

例子 ：
在这个例子中，id=”drag”的

被拖放到id=”drop”的

上。
代码#1：

jQuery UI Droppable



#drag 
    { 
    width: 100px; 
    height: 100px;
    float: left; 
    margin: 10px; 
    background-color :aqua;
    padding:10px; 
    }
#drop
    {
    width: 150px; 
    height: 150px; 
    float: left;
    margin: 10px; 
    background-color:yellow;
    padding:10px;
    }





$( function() {
    $( "#drag" ).draggable();
    $( "#drop" ).droppable(
        {
            drop :function()
        {
            alert("I am dropped");
        }
        } );
        } );




Welcome to GeeksforGeeks

Drag Me


Drop On Me



                    

输出：
掉落前

掉落后

代码#2：
在这个例子中，id=”drag”的

被拖放到id=”drop”的

上，不能拖放到id=”non-drop”的

上。

jQuery UI Droppable



#drag 
    { 
    width: 100px; 
    height: 100px;
    float: left; 
    margin: 10px; 
    background-color :aqua;
    padding:10px; 
    }
#non-drop
        { 
    width: 100px; 
    height: 100px;
    float: left; 
    margin: 10px; 
    background-color :orange;
    padding:10px; 
    }
#drop
    {
    width: 150px; 
    height: 150px; 
    float: left;
    margin: 10px; 
    background-color:yellow;
    padding:10px;
    }
  





$( function() {
    $( "#drag" ).draggable();
    $( "#non-drop" ).draggable();
        $( "#drop" ).droppable(
        {
            accept:"#drag",
            drop :function()
        {
            alert("I am dropped");
        }
        } );
        } );
  




Welcome to GeeksforGeeks

Drag Me


Non droppable


Drop On Me



                    

输出：
掉落前

掉落后

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。