La opción de restricción en el módulo Ordenable se usa para restringir la dirección de movimiento de los elementos mientras se arrastran. Puede configurarse en ‘horizontal’ o ‘vertical’, lo que permite el movimiento solo en esa dirección. Su valor por defecto es ‘vertical’.
Sintaxis:
Sortable.create('list', {constraint: 'horizontal' | 'vertical' })
Los siguientes ejemplos demuestran esta opción:
Ejemplo 1: En este ejemplo, la opción de restricción se establece en ‘horizontal’.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<style>
li {
cursor: move;
}
</style>
</head>
<body>
<ul id="list">
<li>tag</li>
<li>overlap</li>
<li>constraint</li>
<li>containment</li>
<li>handle</li>
</ul>
<script>
Sortable.create('list', {
tag: 'li',
constraint: 'horizontal'
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, la opción de restricción se establece en ‘vertical’.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<style>
li {
cursor: move;
}
</style>
</head>
<body>
<ul id="list">
<li>tag</li>
<li>overlap</li>
<li>constraint</li>
<li>containment</li>
<li>handle</li>
</ul>
<script>
Sortable.create('list', {
tag: 'li',
constraint: 'vertical'
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA