📌  相关文章
📜  jQuery UI 可拖动光标选项(1)

📅  最后修改于: 2023-12-03 14:43:12.553000             🧑  作者: Mango

jQuery UI 可拖动光标选项介绍

简介

jQuery UI 是 jQuery 提供的一套 UI 组件，包括各种常用控件和效果，如可拖动、排序、折叠等等。其中一个非常实用的组件就是可拖动光标选项。

功能

可拖动光标选项可以让用户通过鼠标拖动一个元素，然后将其投放到另一个元素中，从而实现数据的交换。在实际开发中，这种功能非常常见，如拖拽排序、拖拽添加等等。

示例代码
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI 可拖动光标选项介绍</title>
	<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
	<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
	<script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style type="text/css">
        .draggable {
            width: 150px;
            height: 150px;
            background-color: #F0F0F0;
            border: 1px solid #DDD;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 10px;
            cursor: move;
        }

        .droppable {
            width: 150px;
            height: 150px;
            background-color: #EEE;
            border: 1px solid #DDD;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 10px;
        }

        .ui-state-default {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
	<script type="text/javascript">
		$(function() {
			$(".draggable").draggable({
				revert: "invalid",
				cursor: "move"
			});
			$(".droppable").droppable({
				drop: function(event, ui) {
					$(this)
						.addClass("ui-state-highlight")
						.find("p")
						.html("Dropped!");
					$(ui.draggable).fadeOut();
				}
			});
		});
	</script>
</head>
<body>
	<div class="draggable">
		<p>Drag me to my target</p>
	</div>
	<div class="droppable">
		<p>Drop here</p>
		<ul class="ui-state-default">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
		</ul>
	</div>
</body>
</html>
解析代码
HTML 结构

代码中首先定义了两个 div 元素，分别为拖动元素和释放元素。其中拖动元素带有一个 p 元素，用于提供拖动的提示信息；释放元素带有一个 ul 元素，用于存放拖动后的数据。

<div class="draggable">
	<p>Drag me to my target</p>
</div>
<div class="droppable">
	<p>Drop here</p>
	<ul class="ui-state-default">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
		<li>Item 5</li>
	</ul>
</div>
CSS 样式

代码中对拖动元素和释放元素进行了样式的定义，包括大小、背景色、边框和内边距等。同时，拖动元素还带有一个 cursor: move 的样式，用于提供拖动的光标样式。

.draggable {
    width: 150px;
    height: 150px;
    background-color: #F0F0F0;
    border: 1px solid #DDD;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
    cursor: move;
}

.droppable {
    width: 150px;
    height: 150px;
    background-color: #EEE;
    border: 1px solid #DDD;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
}

.ui-state-default {
    margin: 0;
    padding: 0;
    list-style: none;
}
JavaScript 代码

代码中首先利用 jQuery 的选择器对拖动元素和释放元素进行了选择，然后分别调用了 draggable() 和 droppable() 方法，对元素进行了拖拽和释放的绑定。其中，draggable() 方法的参数包括 revert 和 cursor，分别用于设置拖动后的回滚和光标样式；droppable() 方法的参数包括 drop，用于在元素被释放时执行相应的操作。

$(function() {
    $(".draggable").draggable({
        revert: "invalid",
        cursor: "move"
    });
    $(".droppable").droppable({
        drop: function(event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
            $(ui.draggable).fadeOut();
        }
    });
});
总结

可拖动光标选项是 jQuery UI 的一个非常实用的组件，可以帮助我们实现拖拽排序、拖拽添加等等多种功能。其基本用法可以通过上述的示例代码进行学习，同时还可以根据实际需求进行扩展。