JQ 实现图片拖拽排序

Hjy404

已于 2023-01-16 10:44:29 修改

阅读量686

点赞数 1

文章标签： javascript

于 2023-01-16 10:32:13 首次发布

本文链接：https://blog.csdn.net/testHjy/article/details/128701273

版权

本文介绍了一种方法，通过JQ处理图片上传后能够进行拖拽排序。针对追加元素无效的问题，提供了改进后的代码，解决了图片拖拽超出li范围的bug。在拖拽过程中，如果鼠标按下的元素是关闭按钮，则阻止拖拽操作。拖拽结束后，释放拖拽功能以确保其他可拖拽元素正常工作。

摘要由CSDN通过智能技术生成

需求：图片上传后，拖拽排序
网上找了一些案例，大多仅能对现有图片拖拽，对追加的元素无效，找到了了相似案例，改进后代码如下

其中使用背景展示图片，是为了方便控制图片被拖拽到li外部导致bug，不使用背景图展示的话，可以参考‘关闭’按钮禁止拖拽的写法
判断鼠标按下时接触的元素节点
在这里插入图片描述
如果是关闭按钮的节点i,拖拽时直接阻断

拖拽结束后释放拖拽功能，否则点击到禁止拖拽区域后，其它可拖拽元素也无法拖拽了

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>拖拽排序</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        * {
   
            box-sizing: border-box;
        }

        ul {
   
            display: flex;
            flex-wrap: wrap;
        }

        li {
   
            margin:10px;
            font-size: 16px;
            list-style: none;
			height: 100px;
            width: 100px;
            border: 1px solid #ddd;
            cursor: move;
        }

        .dashed {
   
            border: 3px dashed #ddd;
        }

        #container{
   
            display: flex;
        }

		.sort_img{
   
        cursor: move;
        background-size: 100%  100%;
        background-repeat: no-repeat;
		}
		.del-img ,.dels-img{
   
			cursor: pointer;
		}
		.del-img{
   
			position: relative;
			top: -20px;
			border: 1px solid red;
		}

    </style>
</head>

<body>
    <button id=