未捕获的TypeError:无法读取未定义的属性"position"

Question

我正在研究可拖动的物品.我试图存储可拖动div的最终位置,一旦停止被拖动.当我有以下javascript代码时工作正常.

function make_draggable(elements)
 {
  /* Elements is a jquery object: */
  elements.draggable({
    containment: 'parent',
    start: function (e, ui) {
      ui.helper.css('z-index', ++zIndex);
    },
    stop: function (e, ui) {
      /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
      $.get('ajax/update_position.php', {
        x: ui.position.left,
        y: ui.position.top,
        z: zIndex,
        id: parseInt(ui.helper.find('span.data').html())
      });
    }
  });
}

每次用户停止拖动div时,我都不希望更新数据库.所以我想添加一个确认按钮(当用户停止拖动时出现)以进行AJAX调用.所以我尝试了以下代码

var $button = $("#button");

function make_draggable(elements) {
    /* Elements is a jquery object: */
    elements.draggable({
        containment: 'parent',
        start: function (e, ui) {
            ui.helper.css('z-index', ++zIndex);
            $("#button").animate({
                opacity: 0
            }, 1000);
        },
        stop: function (e, ui) {
            /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
            $('#chatAudio')[0].play();
            $("#button").animate({
                opacity: 1
            }, 1000);
            /*  $.get('ajax/update_position.php',{x : ui.position.left,y: ui.position.top,z: zIndex,id:parseInt(ui.helper.find('span.data').html())});*/
        } /*stop is ending */
    }); /* element.draggable is ending */

}

 function myFunction() {
    alert(1);
    /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
    $.get('ajax/update_position.php', {
        x: ui.position.left,
        y: ui.position.top,
        z: zIndex,
        id: parseInt(ui.helper.find('span.data').html())
    });

}

但是,当我单击确认按钮时,我Uncaught ReferenceError: ui is not defined在javascript控制台上看到错误.

我认为ui没有定义.所以我添加(e,ui)如下所示

function myFunction(e,ui) {
        alert(1);
        /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
        $.get('ajax/update_position.php', {
            x: ui.position.left,
            y: ui.position.top,
            z: zIndex,
            id: parseInt(ui.helper.find('span.data').html())
        });

    }

但现在我得到了 Uncaught TypeError: Cannot read property 'position' of undefined

这是我的网站

Answer 1

这是关于传递参数和公开对象的全部内容.您无法访问"myFunction"中的ui参数,因为如果我猜对了,它会被"#button"对象的"click"事件调用.click事件不知道"ui"辅助对象,因此它不会传递给您的函数.

所以,基本上,你有很多可拖动的元素,但只有一个确认按钮.解决问题的最简单方法是,像Mohit建议的那样,通过"数据"功能将所需数据与元素绑定在一起.但是,不要绑定'ui'辅助对象本身,只需绑定所需的数据.

简而言之,试试这个.

var $button = $("#button");

function make_draggable(elements) {
    /* Elements is a jquery object: */
    elements.draggable({
        containment: 'parent',
        start: function (e, ui) {
            ui.helper.css('z-index', ++zIndex);
            $("#button").animate({
                opacity: 0
            }, 1000);
        },
        stop: function (e, ui) {

            // All those fancy objects are accessible here, so we get the snapshot of their values, as simple non-cyclic javascript object, and store it with data function.
            $("#button").data('position', {
                x: ui.position.left,
                y: ui.position.top,
                z: zIndex,
                id: parseInt(ui.helper.find('span.data').html())
            });

            $('#chatAudio')[0].play();
            $("#button").animate({
                opacity: 1
            }, 1000);

        } /*stop is ending */
    }); /* element.draggable is ending */
}

function myFunction() {
    alert(1);
    /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
    $.get('ajax/update_position.php', $("#button").data('position'));
}