0

Hello I was make a experiment with DnD html5 and I need to make function who can bring back my div into formerly without refreshing a page.

This is my 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>

I was try load jquery, from this question. But didn't work for me. this is my button to refresh the div back into former, but not work.

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

document.URL not work for me. then I must use what? please help me.

EDIT:

this is the screen shot: before I dropping the image, that is a fullscreen modal I need to drop the image to div rectangle whose overlaying the image tower. before dropping

After I dropped the image :enter image description here

I need to make that clear button. bring back the draggable image comeback into first position.

Community
  • 1
  • 1
jboxxpradhana
  • 468
  • 2
  • 6
  • 22
  • You want to load the current page, into a div on the current page? Is that correct? Or just a section of it after `#`? If the latter, remove the space before the `#` – StudioTime Jan 18 '16 at 08:37
  • I don't see any tags using this `clear` id. – Plain_Dude_Sleeping_Alone Jan 18 '16 at 08:37
  • @DarrenSweeney at [this](http://stackoverflow.com/questions/17886578/refresh-part-of-page-div) question, I must include a space before the hastag. – jboxxpradhana Jan 18 '16 at 08:41
  • @Bravo ya my button at the top of div panel. Believe me I was try the `clear` button with `alert();` and no problem with that – jboxxpradhana Jan 18 '16 at 08:45
  • On page load, get the position of the circle element using javascript (or css). Clicking the reset button can then return the element to that position. I wouldn't mess around reloading for that. – StudioTime Jan 18 '16 at 10:17

1 Answers1

1

Try this:

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

Use window.location.href for current URL

But this will only replace it with what's already there so what's the point?

StudioTime
  • 22,603
  • 38
  • 120
  • 207