|
|
@@ -0,0 +1,136 @@
|
|
|
+<!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>
|
