jQuery UI的dragable()和droppable()方法

jQuery UI是一个混合的方法和一套用户界面效果、小工具、互动和主题，可以使用jQuery方法在网页中提供。如果你想建立一个强大的网络应用程序，包括各种功能，如拖动、下拉、日期选择器、工具提示等，那么jQuery UI是建立这些效果的完美选择。
在这篇文章中，我们将学习各种jQuery UI交互。

Draggable() 方法

这个方法允许元素在鼠标的帮助下被拖动。使用jQuery UI，我们可以使DOM(D ocument O bject M odel)元素在视图端口内的任何地方拖动。这可以通过用鼠标点击可拖动的对象并将其拖到视图端口的任何地方来实现。

语法:
draggable()方法有两种形式，每种形式的使用取决于需求。这两种形式如下：-

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

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

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

选项	目的
addClass	如果这个选项的值被设置为false，它将阻止DOM元素被拖动。这个选项的默认值是true。
axis	该选项用于限制可拖动对象的移动。如果该选项的值设置为Y，那么该对象只能在垂直方向上拖动，如果该选项的值设置为X，那么该对象只能在水平方向上拖动。
containment	该选项也用于约束可拖动对象在特定区域或某些元素内的移动。该选项的默认值为false。
opacity	该选项用于控制可拖动对象在被拖动时的不透明度。该选项的默认值为false。

示例:
在这个例子中， <div>id="d1 "可以在视图端口的任何地方拖动。 <div>id="d2″可以沿X轴拖动，而 <div>id="d3″可以沿Y轴拖动。

代码 #1:

<!doctype html>
<html>
<head>
<title>jQuery UI Draggable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/
                            1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#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;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<div id="d1">
 
<p>Drag Me Anywhere</p>
 
</div>
<div id="d2">
 
<p>Drag Me Horizontally</p>
 
</div>
<div id="d3">
 
<p>Drag Me Vertically</p>
 
</div>
<script type="text/javascript">
 $( function() {$ ("#d1").draggable();
} );
 $( function() {$ ("#d2").draggable({axis:"x"});
} );
 $( function() {$ ("#d3").draggable({axis :"y"});
} );
</script>
</body>
</html>

输出:

Before Dragging

jQuery UI的dragable()和droppable()方法

After Dragging

jQuery UI的dragable()和droppable()方法

Droppable() 方法:

这个方法允许元素在鼠标的帮助下被放置。使用jQuery UI，我们可以使DOM(D ocument O bject M odel)元素在视图端口的任何地方落到指定的目标上。这可以通过用鼠标点击可拖动的对象并将其放到指定的目标上来实现。

语法:

droppable()方法有两种形式，每种形式的使用取决于需求。这两种形式如下：-

$(selector, context).droppable (options)

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

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

选项	目的
接受	该选项的值指定哪些可拖动的对象可以被投放到指定的目标。该选项的默认值是*。
addClass	如果这个选项的值被设置为false，它将防止DOM元素被删除。这个选项的默认值是true。
disable	该选项也用于禁用DOM元素的dropable属性。如果该选项的值被设置为true，那么该对象不能被丢弃，如果该选项的值被设置为false，那么该对象可以被丢弃在指定目标上。

示例 :
在这个例子中，该 <div>id="drag "的文件被拖放到了 <div>与id="drop"。

代码 #1:

<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/
                             themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#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;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
 $( function() {$ ( "#drag" ).draggable();
    $( "#drop" ).droppable(
        {
            drop :function()
        {
            alert("I am dropped");
        }
        } );
        } );
</script>
</head>
<body>
<center>
<h1 align="center">Welcome to GeeksforGeeks</h1>
<div id="drag">
 
 
<p>Drag Me</p>
 
 
</div>
<div id="drop">
 
 
<p>Drop On Me</p>
 
 
</div>
</center>
</body>
</html>

输出:

Before Dropping

jQuery UI的dragable()和droppable()方法

After Dropping

jQuery UI的dragable()和droppable()方法

代码 #2:
在这个例子中，该 <div>id="drag "的情况下被拖拽到了 <div>id="drop "的情况下，它不能被放置在 <div>with id="non-drop".

<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/
                             themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#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;
    }
 
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
 $( function() {$ ( "#drag" ).draggable();
     $( "#non-drop" ).draggable();$ ( "#drop" ).droppable(
        {
            accept:"#drag",
            drop :function()
        {
            alert("I am dropped");
        }
        } );
        } );
 
</script>
</head>
<body>
<center>
<h1 align="center">Welcome to GeeksforGeeks</h1>
<div id="drag">
 
 
<p>Drag Me</p>
 
 
</div>
<div id="non-drop">
 
 
<p>Non droppable</p>
 
 
</div>
<div id="drop">
 
 
<p>Drop On Me</p>
 
 
</div>
</center>
</body>
</html>

输出:

Before Dropping

jQuery UI的dragable()和droppable()方法