在页面中加载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问题中尝试this jquery。但对我没用。 这是我的按钮，将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获取当前网址

但是这只能用已经存在的内容取代它，那么重点是什么？