Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > jquery.ui.draggable передача параметров


Автор: JVM 11.3.2011, 10:33
В обработчике onMouseMove события drag (см. код ниже) хочется обратиться к элементу div2, но не через селектор, как в примере, а как к объекту. Есть ли возможность передать ссылку на объект div2 в метод onMouseMove?
Код

<!DOCTYPE HTML>
<html>
<head>
    <title>My test</title>

    <script src="js/jquery-1.4.4.js" type="text/javascript"></script>


    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="js/jquery.ui.draggable.js" type="text/javascript"></script>

    <style>
        #container{
            height:800px;
            width:1000px;
            position:relative;
        }
        #div1, #div2{
            height: 100px;
            width:100px;
            position:absolute;
        }
        #div1{
            background-color:#a52a2a;
        }
        #div2{
            background-color:#ff7f50;
        }
    </style>

    <script type="text/javascript">
        function MyFunc(){
            var container = $("<div id='container'></div>");
            var div1 = $("<div id='div1'></div>");
            this.div2 = $("<div id='div2'></div>");
            container.append(this.div2);
            container.append(div1);
            $("body").append(container);

            div1.draggable({
                axis: "x",
                drag: this.onMouseMove
         });

        }
        MyFunc.prototype.onMouseMove = function(event, ui){
            /*К div2 можно обратиться так*/
            $("#div2").css({top: ui.position.left});
        };
        window.onload = function(){
            new MyFunc();    
        };
    </script>
</head>
</html>

Автор: нуп 11.3.2011, 12:36
Код

function MyFunc(){            
    var container = $("<div id='container'></div>");  
    var div1 = $("<div id='div1' style='width: 100px; height: 100px; background: #ccc;'></div>");   
    this.div2 = $("<div id='div2' style='width: 100px; height: 100px; background: #aaa;'></div>");    
    container.append(this.div2);       
    container.append(div1);      
    $("body").append(container);
    var self = this;
    div1.draggable({    
        axis: "x",      
        drag: function(event, ui) {
                  self.onMouseMove(event, ui);
                }
    });
 }       
MyFunc.prototype.onMouseMove = function(event, ui){   
    /*К div2 можно обратиться так*/     
       this.div2.css({top: ui.position.left});      
}
    

 var o = new MyFunc();

 smile 

Автор: JVM 11.3.2011, 12:45
Что не так?

Автор: нуп 11.3.2011, 13:18
Смотрите мой бото код  smile 

Автор: JVM 11.3.2011, 14:47
А понял smile. Спасибо.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)