Draggable不適合放入拖放時拖回

Question

我是新來的Draggable和Droppable插件。這裏我的應用程序的codepen林http://codepen.io/anon/pen/qEMVwE

這是如何工作的， 1.我們可以拖動div元素（藍色）在<td>標籤。 2.我們可以通過拖放在同一行放置兩個div，第二個 div將着色爲紅色。

這裏我的問題是，當我將div（紅色）拖回到任何空列時，它的left屬性不會改變。它不適合放在該行之外的行。

drop和drag類別必須在相對位置和絕對位置，請不要更改。

請幫幫我，這對我很有幫助。提前致謝。

Answer 1

這裏是a working example

在您的代碼，改變你的handleCardDrop()功能是這樣的：

function handleCardDrop(event, ui) { 
    if($(this).children('.drag').length <2){ 
      $(ui.draggable).css({"top": "1px" ,"left": 0 }).appendTo(this); 
      var apptValue = dataAppt.attr("data-appt"); 
      apptValue -= 1; 
      dataAppt.attr("data-appt", apptValue); 
      if(($(this).attr("data-appt")) == 1){ 
       $(this).attr("data-appt","2"); 
      } 
      else{ 
       $(this).attr("data-appt","1"); 
      } 
      ui.draggable.draggable('option', 'revert', false); // move this outside the if/else so it gets applied in all cases 
      resetAppointment(); 
      } 
    else{ 
     alert('Only Two allowed!!!'); 
    } 

} 

此外，改變你的resetAppointment()功能是這樣的：

function resetAppointment(){ 
    $('td[data-appt="2"] .drag').css("width", "45%"); // 45% not 50% since your full witdh elements are only 90% not 100% 
    var width = $('td[data-appt="2"] .drag').first().width(); 
    $('td[data-appt="2"] .drag').last().css({"left": width}); // wrap your selector string with single quotes and use double quotes inside where needed so you dont have to escape the quotes 
    $('td[data-appt="1"] div.drag').css({"width": "90%", "left" : "0px"}); // i use px explicitly here because if I dont, I'll always forget to add it later when I change this to 10 or something 
}