javascript - 以向后的方式将整个内容从一个 div 拖放到所有其他 div
问题描述
我正在尝试做同样的事情,但做不到。实际上我已经创建了五个 div,我希望一个 div 中包含的全部信息以来回方式拖放到所有其他 div 中。这是我的代码:JAVASCRIPT
<script>
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:
<div id="container" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="box" draggable="true" ondragstart="drag(event)" ondrop="drop(event)">hey !! this is me ....</div>
<div id="box" draggable="true" ondragstart="drag(event)" ondrop="drop(event)">Draggable item 1 </div>
<div id="box" draggable="true" ondragstart="drag(event)" ondrop="drop(event)">Draggable item 2 </div>
</div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
解决方案
让你的代码像这样工作https://jsfiddle.net/50ar7wpk/11/
<head>
<style>
.container {
background-color: #DDD;
height: 80px;
margin: 10px;
padding: 4px;
}
</style>
<script>
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>
</head>
<body>
<div id="container" class="container" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="box1" draggable="true" ondragstart="drag(event)">hey !! this is me ....</div>
<div id="box2" draggable="true" ondragstart="drag(event)">Draggable item 1 </div>
<div id="box3" draggable="true" ondragstart="drag(event)">Draggable item 2 </div>
</div>
<br>
<div id="div1" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
推荐阅读
- javascript - 在 jQuery 中附加外部 PHP 文件
- jwt - 基于 JWT 声明的 Istio Origin 授权
- selenium - 一次创建 Selenium Webdriver 并在 Cucumber 的所有步骤中使用
- python - 内连接只是逐行执行合并?
- java - 在 extJS 中捕获 div 元素的屏幕截图
- html - HTML5 嵌入元素类型
- doxygen - C中缺少一些调用图
- php - docker-php-ext-install - 尽管安装了扩展,但仍然找不到源
- spring-boot - Spring Boot:如何设置和读取 cookie
- excel - 将大量单元格从一个工作簿移动到另一个工作簿