📌  相关文章
📜  如何使用 HTML CSS 和 jQueryUI 创建用于重新排序图像的拖放功能？(1)

📅  最后修改于: 2023-12-03 15:38:00.962000             🧑  作者: Mango

如何使用 HTML CSS 和 jQueryUI 创建用于重新排序图像的拖放功能？

在本文中，我们将介绍如何使用 HTML，CSS，和 jQueryUI 来实现拖放图像的重新排序功能。

需求

在开始之前，我们需要确定我们的需求：

  1. 有一组图像需要重新排序
  2. 用户能够拖动图像，并将其放置在新位置
  3. 在图像重新排序时，不应该发生页面重载
实现方法

在开始编写代码之前，请确保您已经为您的项目引入 jQuery 和 jQueryUI 库。这两个库可以从官方网站 https://jquery.com/ 和 https://jqueryui.com/ 下载。

HTML 和 CSS

我们需要一个容器来放置我们的图像，并为容器设置一些基本的样式。

<div id="image-container">
    <img src="image1.jpg" class="image">
    <img src="image2.jpg" class="image">
    <img src="image3.jpg" class="image">
</div>

我们需要使用 CSS 来设置容器的宽度和高度，并确保图像不会重叠：

#image-container {
    width: 600px;
    height: 400px;
    margin: auto;
}

.image {
    position: absolute;
    width: 200px;
    height: 200px;
}
jQueryUI

接下来，我们需要使用 jQueryUI 来实现图像的拖放功能。我们需要使用以下代码来初始化拖放：

$( function() {
    $( "#image-container" ).sortable();
    $( "#image-container" ).disableSelection();
});

在这一行代码中，我们先选择 #image-container 元素，然后使用 .sortable() 方法来使得该元素可以拖放。.disableSelection() 方法可以确保在拖放时，文本不会被选中。

这样我们就实现了一个基础的拖放功能，但是，我们需要使用一些自定义代码来保证拖放的图像不会重叠，以及在拖至新位置后重新排列图像。

$( function() {
    $( "#image-container" ).sortable({
        cursor: "move",
        stop: function(event, ui) {
            $(ui.item).css({"top":"", "left":"", "bottom":"", "right":""});
            $( "#image-container" ).sortable("refreshPositions");
        },
        over: function(event, ui) {
            var index = $(ui.placeholder).index();
            var below = $(ui.placeholder).next('.image').length ? 
                $(ui.placeholder).next('.image').offset().top + $(ui.placeholder).next('.image').outerHeight() : 
                $(this).offset().top + $(this).outerHeight();
            var above = $(ui.placeholder).prev('.image').length ? 
                $(ui.placeholder).prev('.image').offset().top : 
                $(this).offset().top;
            if (ui.position.top < above || ui.position.top > below || ui.position.left < $(this).offset().left || ui.position.left > $(this).offset().left + $(this).outerWidth()) {
                $(ui.item).appendTo(this).css({"top":"", "left":"", "bottom":"", "right":""});
                $( "#image-container" ).sortable("refreshPositions");
            }
        }
    });
    $( ".image" ).disableSelection();
});

在这一段代码中，我们使用了 .sortable() 方法的三个事件：

  • stop: 当用户停止拖动时触发，我们将拖动的图像的位置设置为初始值，并刷新位置以确保不会彼此重叠。
  • over: 当用户将拖动的图像移到新的位置时触发。我们使用一些计算来确保它的位置不会超出界限，并在超出时重新插入原来的位置。
完整代码

下面是完整的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像拖放</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        #image-container {
            width: 600px;
            height: 400px;
            margin: auto;
        }

        .image {
            position: absolute;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <img src="image1.jpg" class="image">
        <img src="image2.jpg" class="image">
        <img src="image3.jpg" class="image">
    </div>

    <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $( function() {
            $( "#image-container" ).sortable({
                cursor: "move",
                stop: function(event, ui) {
                    $(ui.item).css({"top":"", "left":"", "bottom":"", "right":""});
                    $( "#image-container" ).sortable("refreshPositions");
                },
                over: function(event, ui) {
                    var index = $(ui.placeholder).index();
                    var below = $(ui.placeholder).next('.image').length ? 
                        $(ui.placeholder).next('.image').offset().top + $(ui.placeholder).next('.image').outerHeight() : 
                        $(this).offset().top + $(this).outerHeight();
                    var above = $(ui.placeholder).prev('.image').length ? 
                        $(ui.placeholder).prev('.image').offset().top : 
                        $(this).offset().top;
                    if (ui.position.top < above || ui.position.top > below || ui.position.left < $(this).offset().left || ui.position.left > $(this).offset().left + $(this).outerWidth()) {
                        $(ui.item).appendTo(this).css({"top":"", "left":"", "bottom":"", "right":""});
                        $( "#image-container" ).sortable("refreshPositions");
                    }
                }
            });
            $( ".image" ).disableSelection();
        });
    </script>
</body>
</html>
结论

现在，我们已经使用 HTML，CSS，和 jQueryUI 创建了一个完整的图像拖放功能供给程序员使用。在这篇文档中，我们详细讲解了如何实现图像拖放。希望本文能对您有所帮助。