[英]drag and drop the content from one div to another having same classname and in a sortable manner
[英]to drag and drop the entire content from one div to all other div in back forth manner
我正在嘗試執行相同操作,但無法執行。 實際上,我已經創建了五個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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.