ajax - DOM reloads when using Jquery drag and drop -

ajax - DOM reloads when using Jquery drag and drop -

we making interactive story our school project. problem, when stage have build lego-man. when drag 1 of body parts onto gray area, seems reset dom, or refresh it.

can see going on?

you can see "game" on link.

http://mikkellindblom.dk/tommy-lego/

------ sorry no code!!! ----- don't know part should post, , and not sure if dom resets.

i seeing dom element re-drawing, win7/chrome. code buried within ajax fragments, took awhile track things down, think what's happening when dropping item -- it's registering click event, , on page, have click event :

// level 2 handeler $("#level-2").click(function(){ if ( $( ).hasclass( "active" ) ) { $( "#level_holder" ).fadeout( "slow" ); $( "#loader" ).fadein(); $( "#content_holder" ).load('content/content-2.html'); $( "#content_holder" ).fadein(); $( "#loader" ).fadeout(); } else { swal({ title: "hov!", text: "du skal klare level 1 først!", type: "error", confirmbuttontext: "okay" }); } });

so might want try, in drag-droppable drop event, prevent event bubbling further. in part, add together code prevent click event go on on bubbling:

function handleitemdrop( event, ui ) { var slotnumber = $(this).data( 'number' ); var itemnumber = ui.draggable.data( 'number' ); // hvis delen er placeret den korrekte ramme. if ( slotnumber == itemnumber ) { ui.draggable.addclass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctitems++; } // antallet af dele der er placeret korrekt = 3 (total = 3), load næste side. if ( correctitems == 3 ) { $( "#main" ).load('content/fragments-1/fragment-3.html'); } event.stoppropagation(); // <-- stops 'click' event firing, reloading "page". }

here's link jquery event handling: http://api.jquery.com/event.stoppropagation/

so - in short, think when drop object, it's firing page's click event ends redrawing fragment. essentially, add together event.stoppropagation() @ end of handleitemdrop function , see if doesn't stop refreshing of dom fragment (it's not much refreshing redoing fadeout , fadein again).

jquery ajax dom draggable droppable