La opción de contención en el módulo Elementos de clasificación se utiliza para habilitar la clasificación entre dos clasificables. Toma una array de elementos o ID de elemento en los que desea habilitar la clasificación.
Sintaxis:
Sortable.create(“element1_id”, {contención: [“element1_id”, “element2_id”]});
Sortable.create(“element2_id”, {contención: [“element1_id”, “element2_id”]});
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="./prototype.js">
</script>
<script type="text/javascript"
src="./scriptaculous.js">
</script>
<script>
window.onload = function () {
Sortable.create("list1", {
tag: "li",
containment: ["list1", "list2"],
});
Sortable.create("list2", {
tag: "li",
containment: ["list1", "list2"],
});
};
</script>
<style>
li {
cursor: move;
}
</style>
</head>
<body>
<strong>List-1</strong>
<ul id="list1">
<li>tag</li>
<li>overlap</li>
<li>constraint</li>
<li>containment</li>
<li>handle</li>
</ul>
<strong>List-2</strong>
<ul id="list2">
<li>tag</li>
<li>overlap</li>
<li>constraint</li>
<li>containment</li>
<li>handle</li>
</ul>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="./prototype.js">
</script>
<script type="text/javascript"
src="./scriptaculous.js">
</script>
<script>
window.onload = function () {
Sortable.create("list1", {
tag: "div",
containment: ["list1", "list2"],
});
Sortable.create("list2", {
tag: "div",
containment: ["list1", "list2"],
});
};
</script>
</head>
<body>
<strong>List-1</strong>
<div id="list1">
<div><img src="gfg.png" /></div>
<div><img src="g.jpeg" /></div>
</div>
<br /><br />
<strong>List-2</strong>
<div id="list2">
<div><img src="g.jpeg" /></div>
</div>
</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