Cuadrícula de cuadro ordenable con soporte de arrastrar y soltar
| Autor: | MeredithU |
|---|---|
| Views Total: | 2,418 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 9, 2014 |
| Licencia: | Unknown |
Vista prévia
Descripción
Una biblioteca de JavaScript independiente le ayuda a crear una vista de cuadrícula ordenable que le permite mover y volver a ordenar los cuadros a la posición deseada a través de arrastrar y colocar.
Funcionamiento
Cree el código HTML para una vista de cuadrícula.
<body onload="moveInit();"> <section id="boxGrid"> <ul id="boxLayout" class="canvas"> </ul> </section> </body>
El CSS de ejemplo para el estilo de los cuadros.
.canvas {
width: 850px;
display: block;
margin: 0 auto;
}
ul.canvas {
padding: 30px;
overflow: hidden;
list-style-type: none;
text-align: center;
}
.block {
position: relative;
list-style: none;
cursor: move;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.box {
width: 150px;
height: 150px;
background-color: #9eccb3;
float: left;
margin: 10px;
} El código JavaScript para habilitar la faja ordenable.
/* These variables determine the new location of the moving box */
var parentElement; // Represents the container of the box grid
var moveBox; // The moving box
var moveBlock; // The parent of the moving box
var moveBlockIndex; // Index of the moveBlock variable
/* Top left x & y coordinates of the box while it's moving */
var elementXCoord;
var elementYCoord;
/********************************************************************
This function will load all of the boxes into a grid.
The prepareMove function is assigned to the mousedown event and
the stopMove function is assigned to mouseup.
********************************************************************/
function moveInit() {
var gridDiv = document.getElementById("boxLayout");
parentElement = document.getElementById("boxLayout");
for (i = 0; i < 10; i++) {
var newList = document.createElement("li");
newList.className = "block";
var box = document.createElement("span");
box.className = "box";
box.textContent = i;
box.onmousedown = prepareMove;
newList.appendChild(box);
gridDiv.appendChild(newList);
}
document.onmouseup = stopMove;
}
/********************************************************************
This function is called once a user clicks down on a box.
The moveElement function is triggered once the user starts
moving the box around.
********************************************************************/
function prepareMove(event) {
event.preventDefault();
elementXCoord = event.pageX - event.currentTarget.offsetLeft;
elementYCoord = event.pageY - event.currentTarget.offsetTop;
if (typeof event.currentTarget != 'undefined') {
moveBlock = event.currentTarget.parentNode;
moveBlockIndex = getChildIndex(parentElement, moveBlock);
moveBox = event.currentTarget;
moveBox.style.opacity = 0.5;
/***************************************************************
Once the mousedown event is called, it creates a clone of that
box to keep in the original position while user looks for a
new position.
****************************************************************/
moveBlock.appendChild(moveBox.cloneNode(true));
moveBox.style.position = 'absolute';
moveBox.style.zIndex = 2;
moveBox.onmousemove = moveElement;
moveElement(event);
}
}
/********************************************************************
This function is called when the user is moving the box around.
It first finds the x & y mouse coordinates and calculates the
new position of the moving box.
********************************************************************/
function moveElement(event) {
var mouseXCoord = event.pageX; // x coordinate of the mouse as it moves
var mouseYCoord = event.pageY; //y coordinate of the mouse as it moves
var newMouseXCoord = event.pageX - event.currentTarget.parentNode.offsetLeft;
var newMouseYCoord = event.pageY - event.currentTarget.parentNode.offsetTop;
/* Re-calculate the top & left positions of the moving box */
moveBox.style.left = (mouseXCoord - elementXCoord) + "px";
moveBox.style.top = (mouseYCoord - elementYCoord) + "px";
var block = parentElement.childNodes; // the container for all of the boxes (child nodes)
/* Loop through the array containing all the boxes to determine new placement */
for (i = 0; i < block.length; i++) {
/* targetIndex will be used to determine the new position in the array */
var targetIndex = getChildIndex(parentElement, block[i]);
/* Get the box constraints to compare with the coordinates of the moving box */
if (targetIndex != moveBlockIndex) {
var minTopConstraint = block[i].childNodes[0].offsetTop;
var maxTopConstraint = block[i].childNodes[0].offsetTop + block[i].childNodes[0].clientHeight;
var minLeftConstraint = block[i].childNodes[0].offsetLeft;
var maxLeftConstraint = block[i].childNodes[0].offsetLeft + block[i].childNodes[0].clientWidth;
if (minTopConstraint <= newMouseYCoord && newMouseYCoord <= maxTopConstraint) {
if (minLeftConstraint <= newMouseXCoord && newMouseXCoord <= maxLeftConstraint) {
if (targetIndex < moveBlockIndex) {
parentElement.insertBefore(moveBox.parentNode, block[i]);
} else {
insertAfter(block[i], moveBox.parentNode);
}
moveBlockIndex = getChildIndex(parentElement, moveBlock);
break;
}
}
}
}
}
/********************************************************************
When the mouseup event is called, this function will reset our
variables used to track the moving box. In addition, it will
remove the cloned box.
********************************************************************/
/********************************************************************
As the user moves the box around, this function is called to
find what the current index is where the box would be
re-positioned.
********************************************************************/
function getChildIndex (parent, child) {
for (i = 0; i < parentElement.childNodes.length; i++) {
if (child == parent.childNodes[i]) {
return i;
}
}
}
/********************************************************************
This function is called when the moving box is to be placed
after its original location in the node list. If
referenceNode.nextSibling is null, then it will insertBefore
that node.
********************************************************************/
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function stopMove(event) {
if (moveBox && moveBlock) {
moveBox.style.opacity = 1;
moveBox.style.position = 'static';
moveBox.style.zIndex = 1;
moveBox.onmousemove = null;
moveBlock.removeChild(moveBlock.childNodes[1]);
moveBox = null;
moveBlock = null;
}
}
