Comment puis-je créer un séparateur entre deux DIVs avec Prototype

Question

alt text http://img197.imageshack.us/img197/9084/seperator.png

http://img197.imageshack.us/img197/9084/seperator.png

Comment puis-je créer un séparateur, comme Google Docs dans l'image ci-dessus, en utilisant un prototype?

Answer 1

Ce séparateur est en fait une cellule de table contenue dans une ligne de table. Il maintient un background-color et background-image pour lui donner l'effet semblable à ce que vous verriez dans une application de bureau.

Je ne sais pas dans quelle mesure vous voulez faire cela, mais en supposant que la cellule de table est déjà spécifiée dans le balisage et il a les styles appropriés, vous aurez besoin de configurer plusieurs choses:

• Un gestionnaire mousedown pour l'enregistrement lorsque l'utilisateur a cliqué sur la cellule.
• Un gestionnaire mousemove pour mettre à jour la position du séparateur dans le contexte de la fenêtre du navigateur.
• Un gestionnaire mouseup pour savoir quand arrêter la mise à jour de l'emplacement du séparateur.

Il y a des variations sur la façon de faire, mais voici un exemple extrêmement difficile:

var bMouseIsDown = false; 
Event.observe('separator', 'mousedown', function() { 
    bMouseIsDown = true; 
}); 
Event.observe('separator', 'mouseup', function() { 
    bMouseIsDown = false; 
}); 

Event.observe('separator', 'mousemove', function(evt) { 
    if(bMouseIsDown === true) { 
    var iX = Event.pointerX(evt); 
    var iOffsetX = iX - Position.page($('separator'))[0]; 
    var iWidth = $('separator').getDimensions().width; 
    var iElementOffset = iWidth - iOffsetX; 
    $(this).setStyle({ 
     left: iX - iElementOffset 
    }); 
    } 
}); 

Answer 2

Si vous utilisez déjà Prototype, vous pouvez utiliser le Scriptaculous draggable pour obtenir le séparateur à travailler , puis accrocher dans ses événements pour redimensionner les deux DIV en conséquence.