JQuery Drag and Drop problemi di posizionamento

Question

Ho problemi con la funzionalità di trascinamento della selezione e spero che qualcuno possa aiutare. Le regole in sintesi sono:

1. il "palcoscenico" (.stage) di cui non ci può essere più di una può accettare clonato .pageControl. È l'unica classe che può accettare.

2. Una volta rilasciato su .stage, .pageControl diventa .pageControlDropped e può accettare cloned .wfcControl. È l'unica classe che può accettare.

3. Una volta eliminato .wfcControl, viene sostituito con nuovo html e diventa .wfcControlDropped.

I miei problemi sono:

1. Quando ho trascinare clonato .pageControl a .stage, salta ad una posizione sul .stage che non è la posizione che sto farlo cadere. Posso trascinarlo di nuovo nel punto in cui lo voglio, ma è necessario lasciarlo dove lo faccio cadere. Ho provato il posizionamento CSS ma sembra funzionare su .pageControl. Una volta .pageControl -> .pageControlDropped, salta in un'altra posizione. Inoltre, non è una resistenza molto fluida come negli esempi

2. Se trascino più .pageControls su .stage, ognuno di essi deve accettare .wfcControl. Ma sembra che solo il primo .pageControl (ora .pageControlDropped) lo riceve. Non riesco a ottenere il secondo .pageControlDropped per riceverlo.

3. Come si ottiene successivo .pageControl per non sovrapporre quelli esistenti su .stage?

CSS:

<style type="text/css"> 
.stage { margin-left: -.3em; width: 500px; height: 550px; padding: 0.0em;} 
.pageControl {height:15px; width:15px; background-color:#EAEEFF; border:1px solid blue;} 
.pageControlDropped {height:450px; width:600px;background-color:#F9FAFF;border:1px solid blue;} 
.wfcControl { } 
.wfcControlDropped { } 
</style> 

JQuery:

$('.pageControl').draggable({ 
       helper: 'clone', 
       snap: false, 
       containment: '.stage', 
       handle: '.wfcHandle', 
       stop: function (event, ui) { 
        var pos = $(ui.helper).offset(); 
        $(this).css({ 
         "left": pos.left, 
         "top": pos.top 
        }); 
       } 
      }); 
    $('.wfcControl').draggable({ helper: 'clone', containment: '.pageControlDropped' }); 
    $('.stage').droppable({ 
       accept: '.pageControl', 
       greedy: true, 
       drop: function (event, ui) { 
        $(this).append($(ui.helper).clone()); 
        $('.stage .pageControl') 
         .removeClass('pageControl') 
         .addClass('pageControlDropped') 
         .resizable() 
         .draggable({ 
          containment: '.stage', 
          handle: '.wfcHandle' 
         }) 
         .droppable({ 
          accept: '.wfcControl', 
          greedy: true, 
          drop: function (event, ui) { 
           switch (ui.helper[0].title) { 
            case "Play Greeting Control": 
             wfcControlDropped = wfcPlayGreetingControl 
             break; 
            case "Input Control": 
             wfcControlDropped = wfcInputControl 
             break; 
           } 
           $(this).append($(ui.helper).clone()); 
           $('.pageControlDropped .wfcControl').replaceWith($(wfcControlDropped)); 
           $('.pageControlDropped .wfcControlDropped') 
            .draggable({ 
             containment: '.pageControlDropped' 
            }) 
          } 
         }).clone(false) 

        return false; 
       } 
      }); 

infine, l'HTML:

<div id = "divPageControl" title = "Page Control" class="pageControl"> 
    <table style = "width:100%" border = "0"> 
     <tr> 
     <td colspan = "1" width = "100%"></td> 
     </tr> 
    </table> 
</div> 
<div id = "divInputControl" title = "Input Control" class="wfcControl" style="height:15px; width:15px; background-color:light green; border:1px solid green;"> 
    <table style = "width:100%" border = "0"> 
     <tr class = "wfcHandle"> 
     <td colspan = "1" width = "100%">&nbsp;</td> 
     </tr> 
    </table> 
</div> 

Grazie per qualsiasi aiuto su questo.

Answer 1

Questo dovrebbe farti sulla buona strada:

HTML:

<div class="pageControl"></div> 
    <div class="wfcControl"></div> 
    <div class="stage"> STAGE</div> 
    <div class="stage"> STAGE</div> 

JavaScript:

$('.pageControl,.wfcControl').draggable({ 
    helper:"clone", 
    opacity:0.5 
}); 

//========================================= 
$('.stage').droppable(
    { 
    tolerance: "fit", 
    greedy:true, 
    accept: ".pageControl", 
    drop: function(e,ui){ 
     $(this).append(
     $(ui.draggable).clone() 
     .css({ 
      position:"absolute", 
    //IMPORTANT 
      top: e.clientY-e.offsetY, 
      left: e.clientX-e.offsetX 
     }) 
     //note containment:parent => IMPORTANT 
     .draggable({containment:"parent", 
        snap:true, 
        snapMode:"outer", 
     //MY ATTEMPT TO STOP USERS FROM OVERLAPPING 
        snapTolerance:15 
        }) 
     .removeClass("pageControl") 
     .addClass("pageControlDropped") 
     .resizable() 
     .droppable({ 
      accept: ".wfcControl", 
      drop: function(ev,ui){ 
      $(this).append(
      $(ui.draggable).clone() 
       .css({ 
       position:"absolute", 
       top:ev.clientY-ev.offsetY-$(this).offset().top, 
       left: ev.clientX-ev.offsetX - $(this).offset().left 
       }) 
       //note containment:parent 
       .draggable({containment:"parent"}) 
       .removeClass("wfcControl") 
       .addClass("wfcControlDropped")  
    );  
    } 

     }) 
    );  
    } 
    } 
); 

DEMO: http://jsbin.com/orepew

fatemi sapere se avete avuto domande