javascript - 未捕获的类型错误 : Cannot read property 'position' of undefined

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())
    });

}

但是当我点击确认按钮时，我在我的 javascript 控制台上看到了 Uncaught ReferenceError: ui is not defined 错误。

我以为 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

这是我的 website

Answer 1

这都是关于传递参数和公开对象的。您无法访问“myFunction”中的 ui 参数，因为如果我猜对了，它是由“#button”对象的“click”事件调用的。单击事件不知道“ui”辅助对象，因此它不会传递给您的函数。

所以，基本上，您有很多可拖动元素，但只有一个确认按钮。解决您遇到的问题的最简单方法是，如 Mohit 建议的那样，通过元素的“数据”功能将您需要的数据绑定(bind)到元素。但是，不要绑定(bind)“ui”辅助对象本身，只需绑定(bind)您需要的数据即可。

简而言之，试试这个。

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'));
}