Uncaught TypeError：无法读取未定义的属性'位置'

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

你是不是在你停止功能设置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 2

您不应该使用droppable与可拖动？在documentation下可以下载，也可以获得ui.position

Answer 3

您可以使用data atribute属性将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 4

这是所有关于传递参数和揭露的对象。你不能访问你的“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 5

好吧，看起来你是一次更新每个div，当你在停止函数中调用PHP的时候。看起来你想在点击确认按钮后立即更新所有的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]); 
    } 
}