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