javascript - 在页面中加载 div 而不刷新整个页面

Question

你好，我正在用 DnD html5 进行实验，我需要制作一个函数，可以将我的 div 恢复到以前的状态，而无需刷新页面。

这是我的 html，

<div class='panel panel-default' >
 <div class="canvas-wrap">
  <div id="canvastowr">
   <img src="<?php echo base_url()?>assets/images/tower_bg/sst3/tower2.png" draggable="false" width="450" height="460">
  </div>
  <div class="overcanvas" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="mw-rf">
   //this img move into dive class overcanvas and I need to make them back
   <img id="mwdragable" src="<?php echo base_url()?>assets/images/mw.png" class="overmw" ondragstart="drag(event)" draggable="true" width="40" height="40" >
   <img id="rfdragable" src="<?php echo base_url()?>assets/images/rf.png" class="overrf" ondragstart="drag(event)" draggable="true" width="40" height="40" >
  </div>
 </div>
</div>

我尝试过load jquery，来自this问题。但对我不起作用。这是我将 div 刷新回原来状态的按钮，但不起作用。

document.getElementById('clear').addEventListener('click', function() {
 $('#canvas-wrap').load(document.URL +  ' #canvas-wrap');
}, false);

document.URL 对我不起作用。那我必须用什么？请帮助我。

编辑:

这是屏幕截图:在放置图像之前，这是一个全屏模式，我需要将图像放置到覆盖图像塔的 div 矩形。

在我删除图像后:

我需要明确那个按钮。将可拖动图像恢复到第一个位置。

Answer 1

试试这个:

document.getElementById('clear').addEventListener('click', function() {
 $('#canvas-wrap').load(window.location.href +  ' #canvas-wrap');
}, false); 

使用window.location.href作为当前URL

但这只会用已有的内容替换它，所以有什么意义呢？