2009-01-09 00:15:54 +00:00
<!doctype html>
< html lang = "en" >
< head >
2009-01-16 22:51:33 +00:00
< title > jQuery UI Sortable - Drop tolerance (stickiness)< / title >
2009-01-09 00:15:54 +00:00
< link type = "text/css" href = "../../themes/base/ui.all.css" rel = "stylesheet" / >
2009-01-14 23:26:15 +00:00
< script type = "text/javascript" src = "../../jquery-1.3.js" > < / script >
2009-01-09 00:15:54 +00:00
< script type = "text/javascript" src = "../../ui/ui.core.js" > < / script >
< script type = "text/javascript" src = "../../ui/ui.sortable.js" > < / script >
< link type = "text/css" href = "../demos.css" rel = "stylesheet" / >
< style type = "text/css" >
#sortable-tolerance-default, #sortable-tolerance-pointer { list-style-type: none; margin: 0; padding: 0; float: left; }
#sortable-tolerance-default li, #sortable-tolerance-pointer li { margin: 3px; padding: 1px; float: left; width: 100px; height: 90px; font-size: 1.3em; text-align: center; }
< / style >
< script type = "text/javascript" >
$(function() {
$("#sortable-tolerance-default").sortable({
tolerance: 'default'
});
$("#sortable-tolerance-pointer").sortable({
tolerance: 'pointer'
});
});
< / script >
< / head >
< body >
< div class = "demo" >
< ul id = "sortable-tolerance-default" >
< li class = "ui-state-default" > < div class = "ui-icon ui-icon-arrow-4" > < / div > Default tolerance< / li >
< li class = "ui-state-default" > < div class = "ui-icon ui-icon-arrow-4" > < / div > 2< / li >
< li class = "ui-state-default" > < div class = "ui-icon ui-icon-arrow-4" > < / div > 3< / li >
< / ul >
< br style = "clear:both;" / >
< br style = "clear:both;" / >
< ul id = "sortable-tolerance-pointer" >
< li class = "ui-state-default" > < div class = "ui-icon ui-icon-arrowthick-1-ne" > < / div > Pointer tolerance< / li >
< li class = "ui-state-default" > < div class = "ui-icon ui-icon-arrowthick-1-ne" > < / div > 2< / li >
< li class = "ui-state-default" > < div class = "ui-icon ui-icon-arrowthick-1-ne" > < / div > 3< / li >
< / ul >
< / div > <!-- End demo -->
< div class = "demo-description" >
2009-01-16 22:51:33 +00:00
< p > Set the stickiness of drop areas using the < strong > tolerance< / strong > option. Specify whether the drop should occur when either the pointer or intersection (mid-point of the sortable item) crosses the drop area's boundary. By default, the script guesses which option is best to use for each drag.< / p >
2009-01-09 00:15:54 +00:00
< / div > <!-- End demo - description -->
< / body >
< / html >
