js学习笔记之把一个div拖动到另一个div上面，这也是之前看到的例子，不知道出处了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<div id="div1" style="width:300px; height:300px; background-color:#0F0" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<div id="drag1" style="width:200px; height:200px; background-color:#999" draggable="true" οndragstart="drag(event)" οndrοp="drop(event)" οndragοver="allowDrop(event)">这个可以拖动到上面绿色的div里面</div>
</body>
<script type="text/javascript">
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
</script>
</html>
效果如下：
js学习笔记之把一个div拖动到另一个div上面，这也是之前看到的例子，不知道出处了无标题文档这个可以拖动到上面绿色的div里面function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}f
这是用两个大的div进行测试，第一个div中有两个小的div，当点击某个小的div的时候，传递点击的div复制到另一个大的div中。并保留之前的div。
（如果不想保留之前的可以搜索 “appendChild()”的方法 ）
点击时候是不刷新的
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>
</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></t...
function tuozhuai(){
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var endpointX = box2.offsetLeft; //+200
var endpointY = box2.offsetTop; //+3...
<!-- 这里为需要拖动的元素 -->
<div class="card"><img @dragstart="start($event)" :src="dianzu" data-id="dianzu" data-name="电阻" alt=""><p>电阻</p></div>
<div class="card"><img @dragstart="start($eve
原生js实现拖动交换div
原理是利用 div 的 draggable 属性及其与之配合使用的事件行为；元素交换的本质其实很将两个数进行交换是一样的道理，只是在交换过程中需要用到别的方法来实现。这里是通过replaceChild来实现的。
css代码
<style>
body {
/* display: flex; */
padding: 100px;
.box {
display: inline-block;
ready里可以有多个待机函数
如果是一个按钮点击事件的捕捉可以是$(".btn1").click(事件函数）
(.控件的id).事件select框事件的捕捉是(.控件的id).事件
select框事件的捕捉是(.控件的id).事件select框事件的捕捉是("#选择框的id").on(“change”,事件函数)
class设置标签的类，可以指定元素属于哪个样式的类
id是元素的名称，class是全局属性，id是局部属性
class样式设
