HTML 5 拖放

dragenter的范围dragenter是HTML5中的一个事件，它在一个可拖动元素进入一个可放置目标的范围时触发。

这个事件通常与dragover和drop事件一起使用，用于实现拖放操作。

在拖放操作中，dragenter事件的范围非常重要。

它定义了哪些元素可以接受被拖动元素的放置。

在这篇文章中，我们将探讨dragenter事件的范围以及它的一些应用。

我们需要了解拖放操作中的两个角色：可拖动元素和可放置目标。

可拖动元素是指那些可以被用户拖动的HTML元素，比如图片、文本框等。

可放置目标是指那些可以接受被拖动元素放置的HTML元素，比如容器、文本框等。

当用户开始拖动一个可拖动元素时，会触发dragstart事件。

然后，当用户将可拖动元素拖动到一个可放置目标上时，会触发dragenter事件。

在这个事件中，我们可以通过一些判断条件来确定是否接受被拖动元素的放置。

我们可以使用event.preventDefault()方法来阻止默认的放置行为。

这样，我们可以自定义拖放操作的行为。

接着，我们可以使用event.dataTransfer.types属性来获取被拖动元素的数据类型。

这个属性返回一个DOMStringList对象，它包含了被拖动元素的数据类型。

我们可以通过判断这个列表中是否包含我们所期望的数据类型来确定是否接受放置。

除了数据类型，我们还可以使用其他条件来确定是否接受放置。

比如，我们可以使用event.dataTransfer.effectAllowed属性来获取被拖动元素的放置效果。

这个属性返回一个字符串，表示被拖动元素的放置效果。

我们可以通过判断这个字符串是否包含我们所期望的放置效果来确定是否接受放置。

在dragenter事件中，我们还可以做一些其他的操作。

比如，我们可以改变被拖动元素的外观，比如改变其边框颜色或背景色。

我们可以使用event.target属性来获取当前触发事件的元素，然后通过修改其样式来改变其外观。

前端开发中的元素拖拽实现技术随着互联网的蓬勃发展，前端开发在网页设计和实现中起着至关重要的作用。

其中，元素拖拽实现技术在用户交互体验方面扮演着重要的角色。

本文将探讨前端开发中的元素拖拽实现技术，并深入探讨其工作原理和应用场景。

一、什么是元素拖拽实现技术元素拖拽实现技术是指通过前端代码逻辑和用户交互，实现在网页中拖动元素的功能。

通过鼠标或触摸屏拖拽元素，既可以改变元素的位置，也可以实现元素之间的交互和数据传递。

这种技术主要应用于网页设计、图形编辑器、拖放购物车等功能中。

二、基于原生JavaScript实现元素拖拽在前端开发中，可以使用原生JavaScript来实现元素的拖拽功能。

通过获取拖拽元素的位置和鼠标的坐标，结合鼠标事件和DOM操作方法，可以实现元素在页面中的拖拽效果。

例如，通过监听拖拽元素的mousedown、mousemove和mouseup 事件，可以控制元素随着鼠标的移动而改变位置，从而实现元素的拖拽。

三、借助第三方库实现元素拖拽为了提高开发效率和代码可维护性，前端开发者可以借助一些开源的第三方库来实现元素拖拽。

在市面上有许多成熟和强大的拖拽库，如jQuery UI、Sortable.js 等。

这些库提供了丰富的API和预定义的样式，使得开发者可以通过简单的引入和配置，即可实现复杂的拖拽功能。

使用第三方库可以减少开发者的工作量，同时也增加了代码的可维护性和可扩展性。

四、HTML5拖放APIHTML5提供了内置的拖放API，使得元素拖拽的实现更加简单和直观。

通过使用HTML5拖放API中的draggable和droppable属性，可以轻松地将元素设置为可拖拽或可放置的目标。

拖动元素时，浏览器会自动处理拖放相关的事件，开发者只需要编写相应的逻辑代码即可。

HTML5拖放API的出现，进一步促进了元素拖拽技术在前端开发中的普及和应用。

五、元素拖拽的应用场景元素拖拽技术在前端开发中有广泛的应用场景。

HTML5拖拽生成流程一、引言在W eb开发中，HT ML5的拖拽功能为用户提供了一种方便、直观的交互方式。

通过拖拽，用户可以将元素从一个位置拖动到另一个位置，从而实现一些有趣的效果和功能。

本文将介绍H TM L5拖拽生成的流程，并提供详细的步骤和示例代码。

二、基本概念1.拖拽源（D r a g So u r c e）拖拽源是指需要被拖拽的元素，可以是任何H TM L元素（如图片、文字、图标等）。

用户可以通过鼠标按住拖拽源来启动拖拽操作。

2.拖放目标（D r o p T a r g e t）拖放目标是指接受拖拽源的元素，也可以是任何H TM L元素。

当拖拽源进入拖放目标的范围内时，拖放目标可以执行一系列的操作。

3.数据传递（D a t a T r a n s f e r）数据传递是指在拖拽过程中传递的数据。

拖拽源可以将自定义的数据附加到拖拽操作中，拖放目标可以从拖拽源中获取这些数据。

三、拖拽生成流程1.定义拖拽源首先，我们需要将需要拖拽的元素标识为拖拽源。

可以通过添加`d ra gg ab le`属性来实现：<d iv cl as s="d ra g-s o ur ce"d ra gg ab le="tr ue">拖拽源</di v>2.处理拖拽起始事件当用户开始拖动拖拽源时，会触发`d ra gs t ar t`事件。

我们可以通过J a va Sc ri pt来处理这个事件，以便在事件触发时设置传递的数据：d o cu me nt.q ue ry Sel e ct or('.d ra g-s o ur ce').a dd Ev ent L is te ne r('d ra gst a rt',fu nc ti on(ev e nt){e v en t.da ta Tr an sfe r.s et Da ta('te xt/p la in','拖拽的数据');});3.定义拖放目标接下来，我们需要定义一个或多个拖放目标。

html5drag事件⽤法drag事件⽤法html5的drag事件总共有 7 个，还有⼀个事件传递对象拖曳⽬标对象ondragstart 拖曳开始ondrag 拖曳中ondragend 拖曳结束释放对象ondragenter 进⼊释放⽬标ondragover 在⽬标中拖曳ondragleave 离开释放⽬标ondrop 释放各个事件的触发顺序ondragstart -> ondrag -> ondragenter -> ondragover -> ondragleave -> ondragend -> ondrop事件传递对象 dataTransfer⽤来在拖曳过程中传递数据。

对象属性：dropEffect:设置或返回拖放⽬标上允许发⽣的拖放⾏为。

如果此处设置的拖放⾏为不再effectAllowed属性设置的多种拖放⾏为之内，拖放操作将会失败。

该属性值只允许为“null”、“copy”、“link”和“move”四值之⼀。

effectAllowed:设置或返回被拖动元素允许发⽣的拖动⾏为。

该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。

items:该属性返回DataTransferItems对象，该对象代表了拖动数据。

types:该属性返回⼀个DOMStringList对象，该对象包括了存⼊dataTransfer中数据的所有类型。

对象⽅法：setData(format,data):将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据getData(format):从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。

clearData([format]):从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。

HTML5之拖放功能（多文件上传和元素拖放）HTML5提供了拖放（Drag and Drop）功能，允许用户通过将对象拖动到指定的区域或元素上来实现一些交互效果，例如元素的重新排序、文件的上传等。

本文将主要介绍HTML5中的多文件上传和元素拖放两种常见的拖放功能。

一、多文件上传实现多文件上传的步骤如下：1. 创建一个接受文件的区域，可以是一个div元素，用来接受被拖动的文件；2. 设置该区域的ondragover事件，这个事件将在文件被拖动到区域时触发，我们需要阻止默认的行为，以便能够成功接受文件；3. 设置该区域的ondrop事件，这个事件将在文件被释放到区域时触发，我们需要获取文件，并进行相应的处理。

具体代码如下：```<div id="dropArea" ondragover="event.preventDefault(" ondrop="handleDrop(event)">将文件拖到此区域进行上传</div><script>function handleDrop(event)event.preventDefault(;var files = event.dataTransfer.files;for (var i = 0; i < files.length; i++)//进行上传操作//...}}</script>```通过以上代码，当用户将文件拖动到id为dropArea的div区域时，浏览器会触发该区域的ondragover事件和ondrop事件，我们通过event.dataTransfer.files属性获取到拖动的文件，然后可以对文件进行上传操作。

二、元素拖放除了文件上传，HTML5的拖放功能还可以用于元素的拖放，即允许用户将一个元素拖动到另一个位置。

这在一些需要交换元素顺序或进行拖动排序的场景中十分有用。

第一章习题答案1.什么是Internet和万维网，它们的区别在哪里？答：Internet是由成千上万台计算机设备互相连接，基于TCP/IP协议进行通信从而形成的全球网络。

万维网是Internet上最重要的服务之一，也常被简称为“W3”或“Web”。

万维网主要使用HTTP协议将互联网上的资源结合在了一起，并在浏览器中以Web页面的方式呈现给用户。

2.请简单描述用户上网浏览网页的原理。

答：用户打开Web浏览器并输入需要访问的URL地址，该地址将发送给对应的Web服务器。

Web服务器然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。

3.Web前端技术的三大核心基础是哪些内容？答：HTML、CSS和JavaScript。

4.Web前端新技术HTML5与HTML有什么关系?答：HTML来源于Hypertext Markup Language（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网上应用最广泛的核心语言。

HTML5是HTML的第五次修改版，也是目前HTML语言的最新版。

第二章习题答案1.HTML5的文档注释是怎样的？答：HTML5使用<!--...-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“...”替换为注释文字内容即可。

<!--...-->标签支持单行和多行注释。

2.HTML5中列表标签有哪些，它们之间有什么区别？答：包括有序列表标签、无序列表标签和定义列表标签三种。

有序列表标签<ol>和</ol>用于定义带有编号的有序列表；无序列表标签<ul>和</ul>用于定义不带编号的无序列表；定义列表标签<dl>和</dl>是用于进行词条定义的特殊列表，每条表项需要结合词条标签<dt>和定义标签<dd>一起使用。

HTML5拖放drag及⽂件拖拽上传HTML5中提供了拖放的api，只需要监听拖放事件，就可以完成相应的功能。

1、可拖放元素默认情况下，img 元素和 a 元素，以及⽂本都是可拖动的，⽽其他元素是不能。

想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。

<img src="img/img1.png" alt="" draggable="false">2、拖放事件拖放事件是发⽣在两个地⽅的：⼀个是被拖放的元素上，另⼀个是拖放⽬标元素上的。

dragstart：被拖放元素上发⽣，按下⿏标键并开始移动是触发，此时光标变成”不能放”符号（圆环中有⼀条反斜线）drag：被拖放元素上发⽣，⿏标拖动期间持续触发（类似mousemove）dragend：被拖放元素上发⽣，拖动停⽌时触发dragenter：拖放⽬标元素上发⽣，元素被拖到该⽬标上触发（类似mouseover）dragover：拖放⽬标元素上发⽣，被拖放元素在放置⽬标范围内移动时持续触发dragleave：拖放⽬标元素上发⽣，被拖放元素拖出了放置⽬标范围时触发drop：拖放⽬标元素上发⽣，被拖放元素放置到了⽬标元素中时触发（在⽬标元素范围内释放⿏标键）所有的元素都⽀持放置⽬标事件（dragenter，dragover，dragleave，drop），但只有⼀些元素默认允许放置，如input，⼤多数元素是不允许放置的，即不是有效的放置⽬标，不会发⽣drop事件。

为了让元素变成可放置，可以重写 dragenter 和 dragover 事件的默认⾏为，只要阻⽌他的默认⾏为就可以了。

在Firefox中，drop事件的默认⾏为是打开被放到⽬标元素上的URL。

即把图⽚或链接拖放到⽬标上，页⾯会转向该图⽚或者该链接页⾯；⽽拖放⽂本到⽬标上，则导致url错误。

html元素拖动互换位置原理HTML元素拖动互换位置原理介绍在Web开发中，经常会遇到需要实现元素的拖动和互换位置的需求。

这种功能可以为用户提供更好的交互体验，增强网页的可用性。

本文将从浅入深，逐步介绍HTML元素拖动互换位置的原理。

基础知识在深入了解HTML元素拖动互换位置的原理之前，我们首先需要了解一些基础知识。

HTML元素HTML元素是Web页面中的构建块。

它们由标签定义，并包含内容和属性。

常见的HTML元素包括<div>、<span>、<p>等。

DOM (Document Object Model)DOM是用于表示和操控HTML文档的一个API。

它将HTML文档解析为一个树结构，使开发人员可以通过编程方式访问和操作HTML元素。

通过DOM，我们可以动态改变网页的结构和样式。

实现原理鼠标事件要实现拖动元素，我们首先需要监听鼠标事件。

常用的鼠标事件包括：•mousedown：鼠标按下事件，触发时记录鼠标位置和拖动元素的初始位置。

•mousemove：鼠标移动事件，触发时根据鼠标位置计算拖动元素应该移动的距离，并实时更新元素的位置。

•mouseup：鼠标松开事件，触发时停止更新元素位置，拖动结束。

拖动元素当鼠标按下时，我们可以开始拖动元素。

实现拖动元素的关键步骤包括：1.记录鼠标位置和拖动元素的初始位置。

2.监听mousemove事件，根据鼠标位置计算拖动的距离。

3.更新元素的位置，使其跟随鼠标移动。

互换位置通过拖动元素，我们可以将它移动到指定位置。

要实现元素的互换位置，我们可以借助DOM来完成。

实现互换位置的步骤如下：1.监听mouseup事件，拖动结束时执行互换操作。

2.根据鼠标位置确定目标位置。

3.使用DOM操作，将被拖动元素插入到目标位置的前面或后面，从而实现位置的互换。

实际应用HTML元素拖动互换位置的原理在实际应用中非常常见，比如：•排序功能：用户可以通过拖动来改变元素的顺序，从而实现列表的排序。

流程图（HTML5拖拽）1<!DOCTYPE html>2<html lang="en">34<head>5<meta charset="UTF-8">6<title>Document</title>7<style type="text/css">8 #d1 {9 width: 800px;10 height: 800px;11 border: 1px solid #ccc;12 position: relative;13 background: #fafafa;14 }1516 #d1>div {17 width: 130px;18 height: 30px;19 border: 1px solid #ccc;20 border-radius: 8px;21 position: absolute;22 z-index: 2;23 text-align: center;24 line-height: 30px;25 background: #fff;26 }2728 #d1>svg {29 width: 100%;30 height: 100%;31 position: absolute;32 z-index: 133 }3435 .input .point {36 position: absolute;37 border: 6px solid transparent;38 border-top: 6px solid #ccc;39 top: 0px;40 left: 58px;41 }4243 .input .circle {44 position: absolute;45 width: 10px;46 height: 10px;47 border: 1px solid #ccc;48 top: -7px;49 left: 60px;50 border-radius: 50%;51 background: #fff;52 }5354 .output .circle {55 position: absolute;56 width: 15px;57 height: 15px;58 border: 1px solid #ccc;59 bottom: -10px;60 left: 57px;61 border-radius: 50%;62 background: #fff;63 cursor: crosshair;64 z-index: 10;65 }6667 .output .circle:hover {68 background: #FC9901;69 }70</style>71</head>7273<body>74<ul class="shuiguo">75<li draggable="true" data-name="ps1">ps1</li>76<li draggable="true" data-name="ps2">ps2</li>77<li draggable="true" data-name="ps3">ps3</li>78<li draggable="true" data-name="ps4">ps4</li>79<li draggable="true" data-name="switch">switch</li>80</ul>81<div id="d1">82<svg>8384</svg>85</div>86<script src="https:///jquery/3.2.1/jquery.min.js"></script>87<script type="text/javascript">88var dragData = [];89//重置拖拽后流程图展⽰90function reload(isend) {91 $(function() {92var html = "";93var g = `94 <defs>95 <marker id="markerArrow1" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">96 <path d="M0,1 L0,5 L3,3 z" fill="#CCCCCC"></path>97 </marker>98 <marker id="markerArrow2" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">99 <path d="M0,1 L0,5 L3,3 z" fill="#cccdff"></path>100 </marker>101 <marker id="markerArrow3" markerWidth="10" markerHeight="10" refX="3" refY="2.6" orient="auto" markerUnits="strokeWidth">102 <path fill="#f00" d="m6.75848,4.22161c-0.13193,0.12924 -0.3468,0.12924 -0.47903,0l-3.03436,-2.97252c-0.13193,-0.12953 -0.13223,-0.33974 0,-0.46927c0.13163,-0.12953 0.3465,-0.12953 0.47933,0l3.03406,2.97223c0.13 103 </marker>104 </defs>105 `;106if($('svg').siblings()) { //清除$('svg')范围外的所有元素107var prev = $('svg').siblings();108for(var i = 0; i < prev.length; i++) {109 prev[i].remove();110 }111 }112 console.log(dragData);113for(var i = 0; i < dragData.length; i++) { //循环dragData，重置流程图所有dom节点114if(dragData[i] != undefined) {115var data = dragData[i];116 html +=117 `118 <div class = "${}" data-drag="1" data-id = "${data.id}" data-inx = "${data.inx}" data-iny = "${data.iny}" data-label = "${bel}" ondragstart = "insideDrag(this)" draggable = "true" style = "transform:translate(${d 119 <span class = "${data.icon}" data-id = "${data.id}"></span>120 <span data-id = "${data.id}">${bel}</span>121 <div class = "output">122 <span class = "circle" title = "输出" onmousedown = "noDrag(this)" onmouseup = "addDrag(this)" onmouseleave = "draw(this)" onmouseenter = "noMove()" data-id = "${data.id}"></span>123 </div>124 </div>125 `126if(data.link.length > 0) {127for(var j = 0; j < data.link.length; j++) {128 g +=129 `130 <g id="${data.link[j].name}">131 <path style="cursor:pointer" d = "M${data.outx} ${data.outy} Q${data.link[j].mx1} ${data.link[j].my1} ${data.link[j].mx2} ${data.link[j].my2} T${data.link[j].dx} ${data.link[j].dy}" stroke = "#CCCCCC" fill 132 </g>133 `134 }135 }136 }137 }138 $('svg').before(html);139 $('svg').html(g);140if(isend) {141 $('svg').on('mouseenter', "path", function() {142 $(this).attr({143 "stroke": "#cccdff",144 "marker-end": "url(#markerArrow2)",145 "marker-mid": "url(#markerArrow3)"146 })147 }).on('mouseleave', "path", function() {148 $(this).attr({149 "stroke": "#cccccc",150 "marker-end": "url(#markerArrow1)",151 "marker-mid": ""152 })153 }).on('click', "path", function() {154var $p = $(this).parent();155var id = $p[0].id;156for(var i = 0; i < dragData.length; i++) {157var data = dragData[i];158for(var j = 0; j < data.link.length; j++) {159if(id == data.link[j].name) {160 data.link.splice(j, 1)161 }162 }163for(var j = 0; j < data.linked.length; j++) {164if(id == data.linked[j].name) {165 data.linked.splice(j, 1)166 }167 }168 }169 $p.remove()170 });171 } else {172 $('svg').off('mouseenter mouseleave', "path");173 }174 console.log($('svg').siblings());175 })176 }177//reload();178 document.getElementById('d1').ondragover = function(e) {179 e.preventDefault(); //流程图展⽰区阻⽌默认事件180 }181var dWidth = Number($('#d1').css('width').slice(0, -2)); //流程图展⽰区域宽度182 console.log(dWidth);183var dHeight = Number($('#d1').css('height').slice(0, -2)); //流程图展⽰区域⾼度184 console.log(dHeight);185var dClient = $("#d1").offset().top; //流程图展⽰区偏移位置top186var dLeft = $("#d1").offset().left; //流程图展⽰区偏移位置left187 console.log('顶部位置', dClient);188 console.log('左边位置', dLeft);189190//模块拖进流程图后，初始化拖拽⽅法191/*192 * word：模块名称193 * name:模块数据名称194 * type:拖拽事件类型，⽤于判断来执⾏不同拖拽事件，"outside"：拖拽完成，"inside"：开始拖拽195 * id:模块id196*/197function drag(word, name, type, id) {198 console.log(type);199 console.log(name);200//在可拖动元素放置在 <div> 元素中时执⾏事件ondrop201 document.getElementById('d1').ondrop = function(e) {202var sTop = $(document).scrollTop(); //⽂档滚动条偏移量top203var sLeft = $(document).scrollLeft(); //⽂档滚动条偏移量left204 console.log('e.target', e.target.dataset.id);205var x, y;206 console.log('e.clientX', e.clientX);207 console.log('e.clientY', e.clientY);208if((dWidth - e.clientX + dLeft + 65) - sLeft >= 132) {209 x = e.clientX - 65 - dLeft + sLeft;210 } else {211 x = dWidth - 133;212 }213if((e.clientX - dLeft) < 65) {214 x = 1;215 }216if((dHeight - e.clientY + dClient + 15) - sTop >= 33) {217 y = e.clientY - 15 - dClient + sTop;218 } else {219 y = dHeight - 33;220 }221if(e.clientY - 15 - dClient + sTop < 0) {222 y = 1;223 }224if(type == "outside") {225 console.log('放下了');226 dragData.push({227 id: dragData.length,228 label: word,229 name: name,230 x: x, //模块相对展⽰区域的位移x231 y: y, //模块相对展⽰区域的位移y232 outx: x + 68, //模块输出点位置x/贝塞尔曲线起点x233 outy: y + 30, //模块输出点位置y/贝塞尔曲线起点y234 inx: x + 65, //模块输⼊点位置x235 iny: y - 1, //模块输⼊点位置y236 link: [], //存放由该模块连接的关联线数据数组237 linked: [], //存放由其他模块连接该模块的关联线数据数组238 dx: 0,239 dy: 0,240 mx1: 0,241 my1: 0,242 mx2: 0,243 my2: 0,244 style: name,245 draw: false,246 icon: name + "Icon"247 });248 console.log(dragData);249 reload(1);250 }251if(type == "inside") {252 console.log(word, name, type, id);253for(var i = 0; i < dragData.length; i++) {254if(id == dragData[i].id) {255 dragData[i].x = x;256 dragData[i].y = y;257 dragData[i].outx = dragData[i].x + 68;258 dragData[i].outy = dragData[i].y + 30;259 dragData[i].inx = dragData[i].x + 65;260 dragData[i].iny = dragData[i].y - 1;261 console.log('dragData[i].link', dragData[i].link);262for(let j = 0; j < dragData[i].link.length; j++) {263 dragData[i].link[j].linkId = parseFloat(dragData[i].link[j].name.split("|")[1]);264 }265for(var k = 0; k < dragData[i].linked.length; k++) {266 console.log('dragData[i].linked[k]', dragData[i].linked[k]);267for(let j = 0; j < dragData.length; j++) {268if(dragData[i].linked[k].linkedNum == dragData[j].id) {269 console.log('ID⼀样了啊');270for(let m = 0; m < dragData[j].link.length; m++) {271if(dragData[i].linked[k].name == dragData[j].link[m].name) {272 console.log("名字⼀样了啊");273 dragData[j].link[m].dx = dragData[i].inx;274 dragData[j].link[m].dy = dragData[i].iny-10;275 dragData[j].link[m].mx1 = dragData[j].outx;276 dragData[j].link[m].my1 = dragData[j].link[m].dy > dragData[j].outy ? dragData[j].outy + (dragData[j].link[m].dy - dragData[j].outy) / 3 : dragData[j].outy - (dragData[j].link[m].dy - dragData[j].outy) 277 dragData[j].link[m].mx2 = dragData[j].outx + (dragData[j].link[m].dx - dragData[j].outx) / 2,278 dragData[j].link[m].my2 = dragData[j].outy + (dragData[j].link[m].dy - dragData[j].outy) / 2279 }280 }281 }282 }283 }284if(dragData[i].link.length > 0) {285for(var j = 0; j < dragData[i].link.length; j++) {286 dragData[i].link[j].mx1 = dragData[i].outx;287 dragData[i].link[j].my1 = dragData[i].link[j].dy > dragData[i].outy ? dragData[i].outy + (dragData[i].link[j].dy - dragData[i].outy) / 3 : dragData[i].outy - (dragData[i].link[j].dy - dragData[i].outy) / 3;288 dragData[i].link[j].mx2 = dragData[i].outx + (dragData[i].link[j].dx - dragData[i].outx) / 2,289 dragData[i].link[j].my2 = dragData[i].outy + (dragData[i].link[j].dy - dragData[i].outy) / 2290 }291 }292 }293 }294 reload(1);295 }296 }297 }298var shuiguo = $('.shuiguo li');299var isondrag = 0;300 console.log(shuiguo);301for(var i = 0; i < shuiguo.length; i++) {302 console.log(shuiguo[i]);303 shuiguo[i].ondragstart = function() {304 console.log('东完了')305 drag(this.innerHTML, , 'outside');306 }307 }308309function insideDrag(item) {310 console.log(item);311if(item.getAttribute('draggable')) {312 drag(bel, item.className, 'inside', item.dataset.id);313 }314 }315316function noDrag(item) {317 event.preventDefault();318 event.stopPropagation();319 console.log(item.parentNode.parentNode);320var parent = item.parentNode.parentNode;321 parent.setAttribute('draggable', false);322for(var i = 0; i < dragData.length; i++) {323for(var d = 0; d < dragData[i].link.length; d++) {324if(!~dragData[i].link[d].name.indexOf("|")) {325 dragData[i].link.splice(d, 1)326 }327 }328if(parent.dataset.id == dragData[i].id) {329 dragData[i].draw = true;330 dragData[i].link.push({331 name: parent.dataset.id + parent.className,332 dx: 0,333 dy: 0,334 mx1: 0,335 my1: 0,336 mx2: 0,337 my2: 0338 });339 $('body').on('mouseup', function(e) {340for(var j = 0; j < dragData.length; j++) {341if(parent.dataset.id == dragData[j].id) {342 console.log('页⾯抬起了');343 dragData[j].draw = false;344var $dom = $(e.target).data("drag") ? $(e.target) : $(e.target).closest("div[data-drag]");345if($dom.length) {346if($dom.data("drag") && $dom[0].dataset.id != dragData[j].id) { //判断是否关联另外模块，⾮⾃⼰347 $('svg').unbind('mousemove');348var name = dragData[j].link[dragData[j].link.length - 1].name + "|" + $dom[0].dataset.id + $dom[0].className;349var isontbe = 0; //判断是否存在关联350for(let i = 0; i < dragData.length; i++) {351if($dom[0].dataset.id == dragData[i].id) {352for(let c = 0; c < dragData[i].linked.length; c++) {353if(name == dragData[i].linked[c].name) {354 isontbe = 1355 }356 }357if(!isontbe) { //不存在时候存⼊linked358 dragData[i].linked.push({359 name: name,360 linkedNum: parseFloat(name)361 })362 }363 }364 }365if(!isontbe) { //不存在时候⽣成link数据366 dragData[j].link[dragData[j].link.length - 1].name = name;367 dragData[j].link[dragData[j].link.length - 1].dx = Number($dom[0].dataset.inx);368 dragData[j].link[dragData[j].link.length - 1].dy = Number($dom[0].dataset.iny)-10;369 } else {370 dragData[j].link.splice(dragData[j].link.length - 1, 1);371 }372 } else {373 dragData[j].link.splice(dragData[j].link.length - 1, 1);374 }375 } else {376 dragData[j].link.splice(dragData[j].link.length - 1, 1);377 }378 $('svg').unbind('mousemove');379 reload(1);380 }381 }382 $('body').unbind('mouseup');383 })384//reload();385 }386 }387 }388389function addDrag(item) {390var parent = item.parentNode.parentNode;391 parent.setAttribute('draggable', true);392for(var i = 0; i < dragData.length; i++) {393if(parent.dataset.id == dragData[i].id) {394 dragData[i].draw = false;395 console.log(dragData[i]);396 }397 }398 }399400function draw(item) {401var parent = item.parentNode.parentNode;402 parent.setAttribute('draggable', true);403for(var i = 0; i < dragData.length; i++) {404if(parent.dataset.id == dragData[i].id) {405if(dragData[i].draw == true) {406 $('svg').mousemove(function(e) {407 console.log(parent.dataset.id);408for(var i = 0; i < dragData.length; i++) {409if(parent.dataset.id == dragData[i].id) {410 console.log(dragData[i]);411if(dragData[i].link[dragData[i].link.length - 1]) {412 dragData[i].link[dragData[i].link.length - 1].dx = e.offsetX;413 dragData[i].link[dragData[i].link.length - 1].dy = e.offsetY-10;414 dragData[i].link[dragData[i].link.length - 1].mx1 = dragData[i].outx;415 dragData[i].link[dragData[i].link.length - 1].my1 = dragData[i].dy > dragData[i].outy ? dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 3 : dragData[i].outy - (dragData[i].dy - dragData[i].outy) / 3 416 dragData[i].link[dragData[i].link.length - 1].mx2 = dragData[i].outx + (dragData[i].dx - dragData[i].outx) / 2,417 dragData[i].link[dragData[i].link.length - 1].my2 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 2418 }419//////////////////////////////////////////////420 dragData[i].dx = e.offsetX;421 dragData[i].dy = e.offsetY-10;422 dragData[i].mx1 = dragData[i].outx;423if(dragData[i].dy > dragData[i].outy) {424 dragData[i].my1 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 3;425 } else {426 dragData[i].my1 = dragData[i].outy - (dragData[i].dy - dragData[i].outy) / 3;427 }428 dragData[i].mx2 = dragData[i].outx + (dragData[i].dx - dragData[i].outx) / 2429 dragData[i].my2 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 2430 }431 }432 reload();433 console.log(2333);434 })435 } else {436 $('svg').unbind('mousemove');437 }438439 }440 }441 }442443function noMove() {444 $('svg').unbind('mousemove');445 }446 $('svg').mouseup(function(e) {447 console.log(e.target);448 $('svg').unbind('mousemove');449for(var i = 0; i < dragData.length; i++) {450 dragData[i].draw = false;451 }452 console.log('起来了');453 })454</script>455</body>456457</html>参考了/zhaoxiang66/article/details/78063271根据⼤神的思路加强了功能，修复了bug。

sortable.js原理Sortable.js是一个开源的JavaScript库，用于实现可拖拽排序功能。

它允许用户通过鼠标或触摸屏幕将元素拖放到一个可排序的位置。

Sortabble.js具有灵活的配置选项，可用于定制拖放操作的行为，因此被广泛应用于各种交互式Web 应用程序中。

在本文中，我们将深入探讨Sortable.js的原理，并一步一步回答相关问题。

1. Sortable.js实现原理如何？Sortable.js的实现原理基于HTML5的拖放API。

HTML5拖放API提供了一组事件和方法，可以用于实现拖放操作。

Sortable.js利用这些API来创建一个可排序的容器，将元素拖放到容器的不同位置。

当用户开始拖动一个元素时，Sortable.js会触发拖动事件，此时它会创建一个占位符元素，用于在拖动过程中占据原来元素的位置。

此后，Sortable.js会检测鼠标或触摸屏的位置，根据鼠标或触摸屏的移动来更新占位符元素的位置。

当用户释放手指或鼠标按钮时，Sortable.js会将元素插入到占位符元素所在的位置，并触发相应的事件，以便开发者可以在代码中处理这些事件。

2. Sortable.js的基本使用方法是什么？要使用Sortable.js，首先需要引入它的JavaScript文件，并创建一个容器元素，用于包含可排序的元素。

然后，通过调用Sortable.js提供的API来初始化容器。

具体而言，使用Sortable.js的基本步骤如下：- 创建一个HTML容器元素，例如一个无序列表（<ul>）或一个有序列表（<ol>）。

- 在JavaScript代码中选择该容器元素，并调用Sortable.js的初始化方法，例如`Sortable.create(element, options)`，其中`element`是要初始化的容器元素，`options`是Sortable.js的配置选项。