CODEWITHSUNDEEP
jquery
Stefano Maglione
Stefano Maglione

Reputation: 4150

ui is not defined with draggable

offset value but console tell me it is not defined :

ui is not defined

In my HTML the jquery script are included:

 <script language="javascript" type="text/javascript"
        src="/templates/protostar/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript"
        src="/templates/protostar/js/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript"
        src="/templates/protostar/js/jclip.js"></script>
<script language="javascript" type="text/javascript"
        src="/templates/protostar/js/cp.js"></script>

I don't understand...this is my jQuery code:

<script type="text/javascript" language="javascript">
(function ($) {
    $(document).ready
    (
        function () {
            $('.mapban').parent().jclip(0, 0, 1060, 750);

            $('#mapplane').draggable({ containment: $('#containermy'),
            scroll: false,
            drag: function() {  
            console.log(ui.offset);
             },


            });

 })
</script>

Upvotes: 0

Views: 3630

Answers (2)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

You forgot to add parameters drag: function (event, ui) {

See event-drag

(function ($) {
    $(document).ready(function () {
        $('.mapban').parent().jclip(0, 0, 1060, 750);
        $('#mapplane').draggable({
            containment: $('#containermy'),
            scroll: false,
            drag: function (event, ui) {
                console.log(ui.offset);
            },
        });
    });
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

In your drag handler method, you are using a variable called ui but is not declared anywhere in the scope of the function that is the reason for the error.

The drag event handler receives 2 arguments, first is the event, second one is an ui object which contains some data specific to the widget event, you need to enhance the event handler method signature to accept those parameters as given below.

jQuery(function ($) {
    $('.mapban').parent().jclip(0, 0, 1060, 750);
    $('#mapplane').draggable({
        containment: $('#containermy'),
        scroll: false,
        drag: function (event, ui) { //here ui is the second parameter
            console.log(ui.offset);
        }
    });
})

Upvotes: 4

Related Questions