tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: inline-block;
            margin-right: 10px;
            text-align: center;
            line-height: 100px;

        }

    </style>
</head>
<body>
<div class="sortable">
    <a class="item">Item 1</a>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <a class="item">Item 4</a>
    <div class="item">Item 5</div>
</div>


<script>

    function setDrag(cssSelector) {
        function addNewStyle(newStyle) {
            let elementId = 'styles_js______';
            let styleElement = document.getElementById(elementId);
            if (!styleElement) {
                styleElement = document.createElement('style');
                styleElement.type = 'text/css';
                styleElement.id = elementId;
                document.getElementsByTagName('head')[0].appendChild(styleElement);
            }
            styleElement.appendChild(document.createTextNode(newStyle));
        }

        // 调用方式
        addNewStyle('.dragging { opacity: 0.5; } .over,.over * { background-color: red; }');


        let elements = document.querySelectorAll(cssSelector);
        for (let i = 0; i < elements.length; i++) {
            elements[i].setAttribute('draggable', 'true');
        }

        let draggingItem = null;
        let draggingIndex = -1;

        function handleDragStart(e) {
            draggingItem = this;
            draggingIndex = getIndex(this);
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/html', this.innerHTML);
            this.classList.add('dragging');
        }

        function handleDragOver(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            e.dataTransfer.dropEffect = 'move';
            return false;
        }

        function handleDragEnter(e) {
            this.classList.add('over');
        }

        function handleDragLeave(e) {
            this.classList.remove('over');
        }

        function handleDrop(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            if (draggingItem !== this) {
                let dropIndex = getIndex(this);
                let parent = this.parentNode;
                if (draggingIndex < dropIndex) {
                    parent.insertBefore(draggingItem, this.nextSibling);
                } else {
                    parent.insertBefore(draggingItem, this);
                }
                items = document.querySelectorAll(cssSelector);
                [].forEach.call(items, function (item, index) {
                    item.setAttribute('data-index', index);
                });
            }
            return false;
        }

        function handleDragEnd(e) {
            this.classList.remove('dragging');
            let items = document.querySelectorAll(cssSelector);
            [].forEach.call(items, function (item) {
                item.classList.remove('over');
            });
        }

        function getIndex(el) {
            let index = 0;
            let sibling = el;
            while (sibling != null) {
                sibling = sibling.previousElementSibling;
                index++;
            }
            return index - 1;
        }

        let items = document.querySelectorAll(cssSelector);
        [].forEach.call(items, function (item) {
            item.addEventListener('dragstart', handleDragStart, false);
            item.addEventListener('dragover', handleDragOver, false);
            item.addEventListener('dragenter', handleDragEnter, false);
            item.addEventListener('dragleave', handleDragLeave, false);
            item.addEventListener('drop', handleDrop, false);
            item.addEventListener('dragend', handleDragEnd, false);
        });
    }


    setDrag(".item")

    // notion-page-mention-token notion-text-mention-token
</script>
</body>
</html>