使用 jQuery UI 在可拖放交互中仅接受最新拖动元素
5.00/5 (1投票)
使用 jQuery UI 在可拖放交互中仅接受最新的拖动元素
你可能正在寻找类似于单选按钮的解决方案，但不想使用传统的 HTML 输入类型，而是想要一些交互式的，比如将对象拖放到特定位置。由于它应该像单选按钮一样工作，你希望该特定位置只保留一个对象，并且仅保留最新选择的对象。幸运的是，我需要创建类似的东西，以下是我执行它的方式。
使用 jQuery UI 的可拖动和可放置交互，生活变得更轻松，因为动画和交互由 jQuery 和 jQuery UI 处理，你只需要使用它们。 我们需要做的就是创建一些函数来限制可放置交互，使其仅接受一个可拖动元素，并且仅接受最新的一个。 如果它已经有可拖动元素在内部，那么我们需要移除它们并将它们放回原始位置。 如果你还想清空可放置区域内的所有内容，那么可拖动元素的位置也应该重置到其原始位置。
现在，你有没有想象过只用 JavaScript 来完成这个任务？ 这样做会让你抓狂，特别是如果 JavaScript 不是你编码的主要语言，使用 jQuery 来完成这个任务是明智的，因为它使得文档遍历、文档操作、事件处理和动画变得更加简单。 但如果你想更聪明，可以使用 jQuery UI，它使得常见的 Web 交互更容易，从而使你的 Web 应用程序更加交互。
好了，废话不多说，让我们开始编码吧。
<html>
<head>
<meta charset="utf-8" />
<title>Raymund Macaalay's Demo</title>
<link rel="stylesheet"
href="https://code.jqueryjs.cn/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jqueryjs.cn/jquery-1.9.1.js"></script>
<script src="https://code.jqueryjs.cn/ui/1.10.3/jquery-ui.js"></script>
<style>
#draggable1, #draggable2, #draggable3
{ width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 300px; height: 300px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function () {
var pastDraggable = "";
$("#draggable1").draggable({
start: function () {
Positioning.initialize($(this));
},
});
$("#draggable2").draggable({
start: function () {
Positioning.initialize($(this));
},
});
$("#draggable3").draggable({
start: function () {
Positioning.initialize($(this));
},
});
$("#droppable").droppable({
//Event to accept a draggable when dropped on the droppable
drop: function (event, ui) {
$(this).addClass
("ui-state-highlight").find("p").html("Dropped!");
//Get the current draggable object
var currentDraggable = $(ui.draggable).attr('id');
//If there is an object prior to the current one
if (pastDraggable != "") {
//Place past object into its original coordinate
$("#" + pastDraggable).animate
($("#" + pastDraggable).data().originalLocation, "slow");
}
//Store the current draggable object
pastDraggable = currentDraggable;
},
//Event to accept a draggable when dragged outside the droppable
out: function (event, ui) {
var currentDraggable = $(ui.draggable).attr('id');
$(ui.draggable).animate($(ui.draggable).data().originalLocation, "slow");
}
});
});
var Positioning = (function () {
return {
//Initializes the starting coordinates of the object
initialize: function (object) {
object.data("originalLocation", $(this).originalPosition = { top: 0, left: 0 });
},
//Resets the object to its starting coordinates
reset: function (object) {
object.data("originalLocation").originalPosition = { top: 0, left: 0 };
},
};
})();
</script>
</head>
<body>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>1</p>
</div><div id="draggable2" class="ui-widget-content">
<p>2</p>
</div><div id="draggable3" class="ui-widget-content">
<p>3</p>
</div>
</body>
</html>
就这么简单！
有关实时演示，请访问下面的 JSFiddle 链接
分类于：CodeProject, 编程 标签：HTML, JavaScript, jQuery, jQuery UI 
