jQuery ziehbare scrollbare Container

Question

Ich habe derzeit eine einfache ziehbare Liste, die ich in einem div (die Elemente) und scrollbar sein möchte.

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

Im Moment habe ich diese Geige: http://jsfiddle.net/YvJhE/660/

Aber wie Sie sehen können, bleiben die ziehbar Elemente innerhalb des Elements Container, ich will sie in der Lage sein zu ziehen, sondern auch die Fähigkeit, nach innen zu bewegen der Element-Container sobald es mehr Elemente gibt, als der Container lang ist.

Kann mich jemand auf die richtige Spur bringen?

Answer 1

Eigentlich ist dies eine gute Frage, denn es zeigt, wie JQuery ziehbare Elemente handhabt. Ihre ziehbaren Elemente können nicht aus dem übergeordneten Element "elements" gezogen werden, da sie die Einschränkung für sie darstellt.

So könnten Sie verzichten, das Elternelement "elements" zu verwenden, dann können Sie sie ziehen, wo immer Sie möchten.

Oder Sie können das Elternelement größer machen, indem Sie Breite und Höhe mit 100% verwenden.

Wenn Sie Draggable innerhalb eines Bootstrap-Containers verwenden, würden Sie bemerken, dass sie bis an die Grenzen des Containers gezogen werden können, aber niemals außerhalb davon.

Sie können auch versuchen, die ziehbaren Elemente außerhalb des übergeordneten Elements mit einer absoluten Position zu platzieren.

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 behandelt Interaktionen wie diese mit einem Helfer-Objekt, das Sie in eine andere DOM-Element anfügen können:

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

Dann können Sie habe irgendwo ein Droppable:

$('#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/

Sie müssen noch die tatsächliche dom Element bewegen, wo sie fallen gelassen wurde, oder neu erstellen, je nachdem, was Sie vorhaben, es zu benutzen.

Answer 3

Die Option helper: 'clone' einen Klon des Elements automatisch macht Sie ziehen, so dass es aus dem Behälter gezogen werden kann:

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