CODEWITHSUNDEEP
javascriptjqueryajax
Mewster
Mewster

Reputation: 1063

Drag div, place it correctly and send ajax request

Lot of things to do, but first thing first.

I have a <div class="showcase"> containing a lot of <div class="game">, each of them having a 

onclick="addpop('delpopup.php?id=something&pos=somethingelse&box=image')"

Tell me if this route is ok:

-use jQuery UI to manage the div drag (can I make the div "snap" in the right place? If i have div1, div2, div3 and div4, if i move div4 over div2, they have to place correctly in div1, div4, div2, div3 possibly not only graphically ("position:absolute") but also in html code

<div1>[...]</div>
<div4>[...]</div>
<div2>[...]</div>
<div3>[...]</div>

After each move, I have to change only the "pos" part of the addpop function of the right divs (if I move 4 over 2, i have to change div4 in pos2, div2 in pos3 and div3 in pos4) (I think this part can be handled via javascript. Is that right?)

-After each drop, I'm sending a request via jQuery/Ajax to another page to try to change in the database the positions sending which DIV (pos and id) I moved and which DIV (pos and id) got the first over when I release the mouse button. How can I get those 4 datas (Can jQuery UI manage to get those datas for me?)

(note: I'm NOT asking the solution of the whole problem; I'm asking if this is the right method to solve this problem)

I was thinking about this possibility. Or, there is another more-simple javascript/jquery/dunnowhat function that handle the whole thing alone? Thanks in advance.

Upvotes: 0

Views: 774

Answers (1)

MG_Bautista
MG_Bautista

Reputation: 2653

Try this...

$(".div").droppable({ 
   drop: function( event, ui ) { 
      if (!ui.draggable.data("drop")){ 
         //here put your ajax
      } 
   }, 
   out: function( event, ui ) { 
      if (ui.draggable.data("soltado")){ 
        //logic of remove element
      } 
   } 
});

Example here

Greetings.

Upvotes: 2

Related Questions