在页面中加载 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 作为当前网址

但这只会用已经存在的东西代替它，那有什么意义呢？