come trascinare da un div scorrevole a un oggetto trascinabile e quindi trascinare di nuovo?

Ho un elenco scorrevole sulla sinistra della pagina (overflow: auto) e diversi droppable sulla destra della pagina. Ho trovato una soluzione alternativa per consentire a un elemento di essere trascinato dall'elenco a un contenitore utilizzando un clone here ma quando l'elemento viene rilasciato, ottiene posizione: assoluta e una posizione superiore e destra aggiunte a uno stile in linea insieme allo z-index che era originariamente lì. Tutte le altre classi allegate sono nella copia, solo che dopo il trascinamento della selezione, quell'elemento non può essere nuovamente trascinato?come trascinare da un div scorrevole a un oggetto trascinabile e quindi trascinare di nuovo?

C'è un modo per fare questo o rimuovere lo stile inline aggiunto dal processo di clonazione?

Il codice semplificato che mostra il problema è mostrato di seguito: dovresti essere in grado di tagliare e incollare semplicemente una pagina e rilasciare il webroot per testarlo. Grazie in anticipo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 

<script> 
    $(document).ready(function() { 
    var dropped = false; 
    $(".container").droppable({ 
    drop: function(event, ui) { 
      dropped = true; 
      $.ui.ddmanager.current.cancelHelperRemoval = true; 
      ui.helper.appendTo(this); 
    } 
}); 
$(".item").draggable({ 
    revert: 'invalid', 
    helper: function(){ 
     $copy = $(this).clone(); 
     return $copy; 
    }, 
     start: function(event, ui) { 
        dropped = false; 
        $(this).addClass("hide"); 
       }, 
       stop: function(event, ui) { 
        if (dropped==true) { 
         $(this).remove(); 
        } else { 
         $(this).removeClass("hide"); 
        } 
       } 
     }); 
    }); 
    </script> 

    <style> 
    .scrollable { 
     margin-top:5px; 
     float:left; 
    height:140px; 
    width:60px; 
    overflow:auto; 
} 

.container { 
    height: 140px; 
    width: 160px; 
    float:left; 
    border:3px solid black; 
    margin:5px; 
} 

.item { 
    float:left; 
    height:40px; 
    width:40px; 
} 

.red {background-color: red; } 
.black {background-color: black;color: white;} 
.green {background-color: green;} 
.blue {background-color: blue; color: white;} 
.yellow {background-color: yellow;} 

</style> 
</head> 

<body> 
    <div id="list" class="scrollable"> 
    <div id="p1" class="item red">A</div> 
    <div id="p2" class="item black">B</div> 
    <div id="p3" class="item green">C</div> 
    <div id="p4" class="item blue">D</div> 
    <div id="p5" class="item yellow">E</div> 
    </div> 
    <div> 
    <div id="c1" class="container"></div> 
    <div id="c2" class="container"></div> 
    <div id="c3" class="container"></div> 
    </div> 
</body>

fonte

2011-10-10 Trevor North

Come i havent stato in grado di risolvere questo e nessuno finora ha un suggerimento, ho implementato una soluzione temporanea, che è quello di creare un div con i pulsanti Pagina su e PageDn e consentire all'utente di scorrere l'elenco manualmente. Io mostro solo N righe e implemento la mia paginazione usando la funzionalità limite in select da mysql. Ciò significa che il DIV non ha bisogno di implementare l'overflow: auto e fornisce una soluzione provvisoria. Sperimenterò e pubblicherò la mia soluzione se ne trovo una e nessun altro può suggerire qualcosa. TIA. –

Nel tuo metodo di arresto trascinabile, ho preso l'elemento clonato e l'ho reso trascinabile.

stop: function(event, ui) { 
     if (dropped==true) { 
      $(this).remove(); 
     } else { 
      $(this).removeClass("hide"); 
     } 
     $('#'+$(this).attr('id')).draggable({revert: 'invalid'}); 
    }

Quando l'elemento trascinamento viene clonato, conserva la classe "ui-trascinabile", ma questo non basta per renderlo trascinabile. Deve essere rimbalzo.

http://jsfiddle.net/CMYzw/

fonte

2011-10-16 13:18:12

Ho già una funzione jquery che applica il draggable utilizzando un selettore (una classe collegata al div) che viene eseguito su Load e ho provato a eseguirlo nuovamente una volta che la pagina è stata aggiornata con ajax ma non ha funzionato. Non pensavo di provare a metterlo nella funzione di stop quindi provarlo. Grazie molto. –

come trascinare da un div scorrevole a un oggetto trascinabile e quindi trascinare di nuovo?

risposta

Problemi correlati