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

jQuery UI是基于jQuery的一款JavaScript库，旨在提供丰富的交互体验和UI组件。其中，dragable()和droppable()方法是其中的两项重要功能，本文将详细介绍它们的使用方法。

jQuery UI的dragable()方法

dragable()方法可以将指定元素设置为可拖拽的状态，通过拖拽来改变元素的位置或状态。以下是dragable()方法的基本使用方式：

$( "#element" ).draggable();

其中，#element为需要设置为可拖拽状态的元素的选择器。使用dragable()方法后，会自动生成一些默认的拖拽效果，例如：当鼠标移动到要拖拽的元素上时，鼠标会变成移动标志等。

除了基本的设置外，dragable()方法还提供了其他可选的参数，例如：axis、containment、cursor、handle等。这些参数分别用于限制拖拽方向、拖拽范围、鼠标指针样式及拖拽手柄。以下是dragable()方法的详细参数说明：

axis：拖拽的方向，取值有x、y、xy，默认值为false（所有方向都可以拖拽）。
containment：拖拽的限制范围，可以是一个DOM元素、选择器或数组，默认值为false（不作限制）。
cursor：鼠标指针的样式，可以是任意指针样式或自定义图片路径等，默认值为auto。
handle：用于拖拽的手柄元素的选择器，默认值为false（所有元素都可以拖拽）。

以下是一个使用了dragable()方法的示例：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI - dragable()方法示例</title>
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid #999;
            text-align: center;
            line-height: 100px;
            color: #333;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="box">拖我试试</div>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".box").draggable();
        });
    </script>
</body>
</html>

在上述示例中，我们定义了一个.box的样式，并通过jQuery选择器选中所有的.box元素，然后调用dragable()方法使其可拖拽。

jQuery UI的droppable()方法

droppable()方法是jquery UI中另一个非常常用的方法，用来设置将选定元素设置为接收拖动元素的区域。以下是droppable()方法的基本使用方式：

$( "#element" ).droppable();

其中，#element为需要设置为接收拖拽元素的区域元素的选择器。使用dragable()方法后，会自动生成一些默认的拖拽效果，例如：当拖拽元素移动到droppable区域上时，区域会进行高亮显示等。

除了基本的设置外，droppable()方法还提供了其他可选的参数，例如：accept、activeClass、hoverClass等。这些参数分别用于限制要拖拽的元素、拖拽时的激活状态、拖拽悬浮状态等。以下是droppable()方法的详细参数说明：

accept：指定哪些元素可以拖动到当前区域，默认值为*（所有元素都可以拖拽）。
activeClass：设置拖动到当前区域时的样式，默认值为ui-state-hover。
hoverClass：设置正在悬浮在当前区域时的样式，默认值为ui-state-active。

以下是一个使用了dragable()和droppable()方法的示例：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI - dragable()和droppable()方法示例</title>
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid #999;
            text-align: center;
            line-height: 100px;
            color: #333;
            cursor: move;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: #eee;
            border: 1px solid #999;
        }
        .box2.hover {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="box">拖我</div>
    <div class="box2"></div>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".box").draggable();
            $(".box2").droppable({
                hoverClass: "hover",
                drop: function(event, ui){
                    $(this).append(ui.draggable);
                }
            });
        });
    </script>
</body>
</html>

在上述示例中，我们首先定义了一个.box的样式，并将其设置为可拖拽的元素。然后，我们定义了一个.box2的样式，并将其设置为droppable()方法的接收元素。

在droppable()方法中，我们设置了hoverClass参数，当拖拽元素悬浮在.box2区域时，这个区域的背景颜色就会改变。同时，我们在方法中添加了drop事件，当拖拽元素被放置在.box2区域内时，会将其添加到该区域中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI的dragable()和droppable()方法 - Python技术站

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

jQuery UI的dragable()方法

jQuery UI的droppable()方法

相关文章