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”事件调用。 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'));
}

Answer 2

您可以使用data属性属性将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) {
            /* adding ui to button data attribute */
            $("#button").data('ui', JSON.stringify(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() {
    /* get data attribute for ui value */
    var ui = JSON.parse($("#button").data('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())
    });
}

Answer 3

你没有在你的停止功能中设置ui，所以当你尝试发送ui.position时，没有什么可以发送的。

您可以通过在停止功能中设置ui然后在get中使用它来解决此问题。

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) {

            window.ui = ui //----------------ADD THIS LINE TO SET IT---------------------------

            /* 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(e, ui) {
    alert(1);

    ui = window.ui   //------------AND SET IT HERE SO IT IS NOT UNDEFINED IN THE GET-------

    $.get('ajax/update_position.php', {
        x: ui.position.left,
        y: ui.position.top,
        z: zIndex,
        id: parseInt(ui.helper.find('span.data').html())
    });
}

Answer 4

您是否不能将droppable与draggable一起使用？在documentation for droppable下，您也可以获得ui.position

Answer 5

好吧，当你在停止函数中调用PHP时，似乎你一次更新每个div。在点击确认按钮后，您似乎想立即更新所有div。

有两种方法可以解决您的问题，第一种方法是更改PHP以接收参数中的所有div（例如，包含所有这些div的Object），第二种方法是循环PHP请求，传递所有的div，一个接一个。

您将make_draggable函数更改为：

function make_draggable(elements) {
    window.myDragglableDivs = {}; // add an object to keep your data
    elements.draggable({
        containment: 'parent',
        start: function (e, ui) {
            ui.helper.css('z-index', ++zIndex);
            $("#button").animate({
                opacity: 0
            }, 1000);
        },
        stop: function (e, ui) {
            // add/update the div positions in your object:
            var divID = ui.helper.find('span.data').html();
            window.myDragglableDivs[divID] = {
                x: ui.position.left,
                y: ui.position.top,
                z: zIndex,
                id: parseInt(divID)
            };

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

我的第一个解决方案是立即发送所有div（在这种情况下，您必须更改PHP以接收它们）：

function myFunction() {
    $.get('ajax/update_position.php', window.myDraggableDivs);
}

或者，我的第二个解决方案，您不需要在PHP中进行任何更改：

function myFunction() {
    for (var key in window.myDraggableDivs) {
        $.get('ajax/update_position.php', window.myDraggableDivs[key]);
    }
}

未捕获的TypeError：无法读取属性＆＃39; position＆＃39;未定义的

5 个答案: