Question

我需要一个jquery代码用于以下场景。有4个div，任何一个都可以拖放到另一个上。丢弃DIV1和DIV2的内容应该合并。

合并后的内容也可以从中拉出并放回原始div 我的代码是这样的。

<div id ="f1">
 <p id="c1">content 1</p>
</div>
<div id ="f2">
 <p id="c2">content 2</p>
</div>
<div id ="f3">
 <p id="c3">content 3</p>
</div>
<div id ="f4">
 <p id="c4">content 4</p>
</div>

如果我在f1上拖动f2然后在f1中我应该像这样找到c1和c2

<div id ="f1">  
 <p id="c1">content 1</p> 
 <p id="c2">content 2</p> 
</div>
<div id ="f3">
  <p id="c3">content 3</p>
</div>
<div id ="f4">
  <p id="c4">content 4</p>
</div>

现在我应该能够拉出c2并把它放到任何其他div。喜欢这个..

<div id ="f1">  
 <p id="c1">content 1</p> 
</div>
<div id ="f3">
  <p id="c3">content 3</p>
</div>
<div id ="f4">
  <p id="c4">content 4</p>
  <p id="c2">content 2</p> 
</div>

请帮帮我。提前谢谢。

Answer 1

我已经设法为此编写了一些代码。在浏览器控制台上，我可以看到

标签被拖动但在UI本身上效果并不清晰。

<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.id).parent().append($('#'+data));
}
</script>

<div id ="f1">
 <p id="c1" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 1</p>
</div>
<div id ="f2">
 <p id="c2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 2</p>
</div>
<div id ="f3">
 <p id="c3" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 3</p>
</div>
<div id ="f4">
 <p id="c4" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 4</p>
</div>

使用jquery在div上拖放div时合并2 div内容

1 个答案: