Показать сообщение отдельно
  #6 (permalink)  
Старый 30.07.2012, 19:18
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

/**
 * Делает доступным перетаскивание элемента. У перетаскиваемого элемента 
 * position должно быть установлено как absolute или fixed, внешние отступы 
 * должны быть заданы в пикселях.
 */
function makeDraggable(el, dragOptions) {
    var drag, dx, dy;
    
    el.addEventListener('mousedown', function(e) {
        var pos = findPosition(this);
        dx = pos[0] - e.clientX - parseInt(getComputedStyleProperty(this, 'margin-left'));
        dy = pos[1] - e.clientY - parseInt(getComputedStyleProperty(this, 'margin-top'));
        this.style.zIndex = maxZindex++;
        
        if (dragOptions.start) {
            dragOptions.start();
        }
        
        drag = true;
    }, false);
    
    document.addEventListener('mousemove', function(e) {  
        if (drag) {
            el.style.left = e.clientX + dx + 'px';
            el.style.top = e.clientY + dy + 'px';
            
            if (dragOptions.drag) {
                dragOptions.drag();
            }
        }
    }, false);
    
    document.addEventListener('mouseup', function() {
        if (dragOptions.end) {
            dragOptions.end();
        }
        
        drag = false
    }, false);


window.onload = function() {    
                var els = document.querySelectorAll('.dragbox');
                
                for (var i = 0; i < els.length; ++i) {
                    (function(el) {                     
                        makeDraggable(el, {
                            start: function() {
                                window.status = 'Start ' + el.style.backgroundColor;
                            },

                            drag: function() {                         
                                window.status = 'Drag ' + el.style.backgroundColor;
                            },

                            end: function() {
                                window.status = '';
                            }
                        });
                    })(els[i]);
                }
            }
Ответить с цитированием