Geek Answers Handbook

Setting Boundary Limits for a Drag and Drop Object

I have two elements:

1. Parent of fixed height, overflow:hidden

2. Its child element with a larger fixed height.

 <style type="text/css"> .myList {list-style:none; margin:0px; padding:1px;} .myList li{ height:50px; margin:4px; padding:2px;} .dragPanel {height:230px; border:solid; overflow:hidden;} </style> <div class="dragPanel"> <ul class="myList"> <li>1</li> <li>2</li> ... .... <li>8</li> <li>9</li> </ul> </div>

I want to be able to drag the list up and down in the parent div. I am using the jquery ui draggable plugin to achieve vertical drag and drop, but I'm not sure how to limit the list in the parent div.

 <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.dragPanel').addClass("hover"); $('.myList').draggable({ axis: 'y' }); }); </script>

How can I set the upper and lower limits of the vertices for the position of the list?

+7
javascript jquery jquery-ui draggable
source share
4 answers

Good,

Here is the route I went down ...

When the page is loaded, I add a div container around the draggable list. I set its height twice as large as the list, and then placed it a bit on the page:

 <script type="text/javascript"> $(document).ready(function() { CreateContainerDiv(); $('.dragPanel').addClass("hover"); $('.myList').draggable({ axis: 'y', containment: 'parent' }); }); function CreateContainerDiv() { var dragPanel = $('.dragPanel'); var dragTarget = $('.myList'); // add the container panel var newPanelHeight = dragTarget.outerHeight() * 2 - dragPanel.outerHeight(); dragTarget.wrap(document.createElement("div")); // set its height and put it in the right place dragTarget.parent().css("height", newPanelHeight); dragTarget.parent().css("position", "relative"); var newPanelPosition = ((dragTarget.outerHeight() * -1) / 2); dragTarget.parent().css("top", newPanelPosition); } </script>

This list is then contained in this new item.

This is similar to completing a task, but positioning shakes things up a bit if there is an addition / margin in the list. Any thoughts on this will be received!

------ Change ---------

Well, I think I solved the problem of accommodation. I turned this into a plugin so that other people do not have to waste time creating this function.

List of draggable jQuery on Github

+3
source share

Use option:

 $('.myList').draggable({ axis: 'y', containment: 'parent' });
+9
source share

I had the same problems and the answers did not help me. Some javascript later I think the following is the best solution.

(Does anyone know how to turn this into a jQuery plugin?)

 <!DOCTYPE html> <html> <head> <title>Draggable limited to the container</title> <style type="text/css"> #container { cursor: move; overflow: hidden; width: 300px; height: 300px; border: 1px solid black; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { $.globalVars = { originalTop: 0, originalLeft: 0, maxHeight: $("#draggable").height() - $("#container").height(), maxWidth: $("#draggable").width() - $("#container").width() }; $("#draggable").draggable({ start: function(event, ui) { if (ui.position != undefined) { $.globalVars.originalTop = ui.position.top; $.globalVars.originalLeft = ui.position.left; } }, drag: function(event, ui) { var newTop = ui.position.top; var newLeft = ui.position.left; if (ui.position.top < 0 && ui.position.top * -1 > $.globalVars.maxHeight) { newTop = $.globalVars.maxHeight * -1; } if (ui.position.top > 0) { newTop = 0; } if (ui.position.left < 0 && ui.position.left * -1 > $.globalVars.maxWidth) { newLeft = $.globalVars.maxWidth * -1; } if (ui.position.left > 0) { newLeft = 0; } ui.position.top = newTop; ui.position.left = newLeft; } }); }); </script> </head> <body> <div id="container"> <img id="draggable" src="avatar.jpg" /> </div> </body> </html>
+6
source share

You do not need to drag anything for such a structure. You need to configure the parent div with overflow-x: hidden; and overflow-y: scroll ;. Thus, its contents will scroll.

If you want to hide the scrollbar, just set this property: .dragPanel :: - webkit-scrollbar {width: 0! important} and that! I really don’t know why you were thinking of dragging and dropping items and not just scrolling content (which is the right way to accomplish such “problems”). In any case, I hope this helps anyone who needs the same need. Hello!

0
source share

More articles:


All Articles