jQuery contenitore trascinabile trascinabile

Question

Attualmente ho una semplice lista trascinabile, che voglio essere all'interno di un div (gli elementi) e scorrevole.

$(".draggable").draggable(); 

Al momento ho questo violino: http://jsfiddle.net/YvJhE/660/

Ma come si può vedere, gli elementi trascinabili rimanere all'interno del contenitore elementi, io voglio che siano in grado di trascinare fuori, ma anche la possibilità di scorrere all'interno il contenitore degli elementi non appena ci sono più elementi, di quanto lo sia il contenitore.

Qualcuno può mettermi sulla strada giusta?

Answer 1

In realtà questa è una buona domanda, perché rivela come JQuery gestisce gli elementi trascinabili. I tuoi elementi trascinabili non possono essere trascinati al di fuori del div degli "elementi" padre, perché rappresentano di per sé la restrizione per essi.

Quindi potresti rinunciare a utilizzare gli "elementi" elemento padre, quindi puoi trascinarli dove vuoi.

Oppure puoi rendere l'elemento genitore più grande, usando larghezza e altezza con il 100%.

Se si utilizza Draggable in un contenitore di bootstrap si noterà che possono essere trascinati fino ai limiti del contenitore, ma mai al di fuori di esso.

Si può anche provare a mettere gli elementi trascinabili all'esterno dell'elemento genitore, con una posizione assoluta.

CSS:

.draggable{ 
    width: 60px; 
    z-index: 15; 
    margin: 0 auto; 
    position: absolute; 
} 

#elements{ 
     overflow: scroll; 
     position:absolute; 
     left:20px; 
     width:100%; 
     height:100%; 
     background:#fff; 
     border:1px solid #000; 
     z-index:5; 
     padding:10px; 
     font-size: 10px; 
} 

Html:

<div id="elements"/> 

<div id="" class="draggable ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

Answer 2

jQuery gestisce le interazioni come questi con un oggetto helper che è possibile aggiungere a un altro elemento DOM:

$(".draggable").draggable({ 
    helper: 'clone', 
    appendTo: '#outer' 
}); 

Poi si può avere un droppable da qualche parte:

$('#dropspace').droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     window.alert('Element dropped at left: ' + ui.position.left + '; top: ' + ui.position.top); 
    } 
}); 

Proof of concept: http://jsfiddle.net/YvJhE/662/

Hai ancora bisogno di spostare l'elemento dom reale per cui è stato rilasciato, o ricrearlo a seconda di ciò che si vuole utilizzare per.

Answer 3

L'opzione helper: 'clone' fa un clone della voce che state trascinando automaticamente in modo che possa essere trascinata fuori dal contenitore:

jQuery(".draggable").draggable({ 
    helper: 'clone', 
    revert: 'invalid', 
    appendTo: 'body' 
});