Geek Answers Handbook

JQuery scrollable container

Currently, I have a simple drag-and-drop list that I want to be inside divs (elements) and scrollable.

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

I currently have this script: http://jsfiddle.net/YvJhE/660/

But, as you can see, the draggable elements remain inside the container of elements, I want them to be able to drag, but also the ability to scroll inside the container of elements as soon as the number of elements is greater than the container is.

Can someone get me on the right track?

+5
source share
3 answers

jQuery handles such interactions with a helper object that you can add to another DOM element:

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

Then you can have droppable somewhere:

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

You still need to move the actual dom element to where it was dropped, or recreate it depending on what you are going to use it for.

+1
source

The helper: 'clone' option makes a clone of the item that you drag automatically so that it can be pulled out of the container:

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

This is actually a good question because it shows how jQuery handles draggable items. Your draggable items cannot be dragged outside the parent div's "elements" because they constitute a restriction on them.

So, you can refuse to use the element elements of the parent element, then you can drag them to where you want.

Or you can increase the size of the parent using width and height from 100%.

If you use Draggable inside the bootstrap container, you will notice that they can be dragged to the borders of the container, but never outside it.

You can also try to put roaming elements outside the parent element with an absolute position.

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>
0
source

More articles:


All Articles