在拖動中記錄DOM位置

Question

我想要注意可拖動div相對於其父級的位置。我有一個全局對象g，它包含另一個對象bPos，它應該包含div class = 'b'在div id ^= 'd'之內的位置。

這是我的代碼：

function() { 
     var thisDiv = ""; 
     var thisDivID = ""; 
     $(".b").draggable({ 
      start: function(event, ui) { 
       thisDiv = $(this).closest("div[id^='d']"); 
       thisDivID = thisDiv.attr("id"); 
       console.log(thisDivID); //also returning undefined 

      }, 
      stop: function(event, ui) { 
       var thisX = event.pageX; 
       var thisY = event.pageY; 
       var thisbPos = { 
        id: thisDivID, 
        x: thisX, 
        y: thisY 
       } 
       g.bPos[thisDivID] = thisbPos; 
       console.log(thisDivID);// returning undefined 
      } 
     }); 
} 

控制檯顯示thisDivID是undefined。即使我給它分配一個任意值，它仍然以undefined的形式出現。任何幫助都會很棒。

Answer 1

改爲使用'drag：'方法。 我用它來允許列表項目被拖出列表，並帶有一點阻力。通常y網格設置爲很高的數字，因此它不能左右移動，只能上下移動。在此代碼中，當用戶嘗試將其移動到左側或右側127px後，它將彈出並自由移動。

希望你得到這個代碼的想法我已經躺在附近：

drag: function (event, ui) 
{ 
    var left = ui.offset.left; //Offset of the list item currently being dragged 

    if (parseInt(left) > 127) 
    { 
     if (!overlay) 
     { 
      overlay = true; 
      $(".li-unreachable").draggable("option", "grid", [1, 1]); //free-moving 
      showOverlay(); 
     } 
    } else 
    { 
     if (overlay) 
     { 
      hideOverlay(); 
      $(".li-unreachable").draggable("option", "grid", [300, 50000]); //y-axis more or less locked down 
      overlay = false; 
     } 
    } 

編輯：讓我知道，如果你需要更多的代碼，我只抓住了，似乎相關的部分。

編輯2：以爲我應該指出，如果將「$（this）」更改爲「ui」，則代碼應該可以工作。

編輯3：下面是一些代碼，是更重要的一點：

$(".b").draggable({ 
    start: function(event, ui) { 
     var x = ui.offset.left; //x coordinate of the object that is being dragged. 
     var y = ui.offset.top; //y coordinate of the object that is being dragged. 
     var elementBeingDragged = ui.item; // ui.helper would work too. 
    }, 
    stop: function(event, ui) { 
     var x = ui.offset.left; //x coordinate of the object that is being dragged. 
     var y = ui.offset.top; //y coordinate of the object that is being dragged. 
     var elementBeingDragged = ui.item; // ui.helper would work too. 
    } 
});