jQuery UI拖放拼圖

我試圖做一個簡單的謎題。當您移動選定的div 1時，它必須交換放置它的div 2的位置，並且div 2必須替換div 1的位置。如果您將藍色降爲紅色，則可以看到此位置。如何對所有元素使用此規則？jQuery UI拖放拼圖

我看到很多解決它的插件 - 但不喜歡在我的項目中使用借來的代碼，所以如果有人給出建議或告訴如何去做，我將不勝感激。

<table> 
<tr> 
<td class="drop"><div class="red"></div></td> 
<td class="drop"><div class="blue"></div></td> 
<td class="drop"><div class="grey"></div></td> 
<td class="drop"><div class="yellow"></div></td> 
</tr> 
</table>

====================================== ================

.drop{ 
     border:1px solid black; 
     width:5em; 
     height:5em; 
     padding: 1em; 
    } 
.red{ 
     border:1px solid black; 
     width:5em; 
     height:5em; 
     background:red; 
     color:white; 
    } 
.blue{ 
     border:1px solid black; 
     width:5em; 
     height:5em; 
     background:blue; 
     color:white; 
    } 
.grey{ 
     border:1px solid black; 
     width:5em; 
     height:5em; 
     background:grey; 
     color:white; 
    } 
.yellow{ 
     border:1px solid black; 
     width:5em; 
     height:5em; 
     background:yellow; 
     color:white; 
    }

=========================== =======================你運行到問題的

$('.red,.blue,.grey,.yellow').draggable({ 
      helper : 'original', 
      opacity : 0.5, 
      axis:'x' 
    }); 
    var blueOffset = $('.blue').offset(); 
    var redOffset = $('.red').offset(); 

    $('.drop').droppable({  
     drop : function(event, ui) { 
        $('.red').offset(blueOffset); 
        $('.blue').offset(redOffset); 
      } 
    });

來源

2014-05-17 Eva Nebko

部分是you'red定義你的blueOffset和redOffset瓦爾出因此，無論何時.drop（）被觸發，您都在使用原始偏移量來確定div應該移動到哪裏，這就是爲什麼這只是第一次。

您需要做的是確定其中每次刪除元素時都會動態地丟棄某些內容。我相信你最好使用draggable的stop屬性，而不是使用單獨的droppable函數。下面是應該讓你開始一個小提琴：http://jsfiddle.net/2MYkV/

和代碼我使用：

 $('.drag').draggable({ 
      helper : 'original', 
      opacity : 0.5, 
      axis:'x', 
      revert: true, 
      stop: function(event) { 
        var dropelt = document.elementFromPoint(event.clientX, event.clientY); 
        var dropcell = dropelt.tagName == "td" ? $(dropelt) : $(dropelt).closest('td'); 
        var dropdiv = dropcell.find('div'); 
        var origcell = $(this).parent('td'); 
        var origdiv = origcell.find('div'); 
        origdiv.detach(); 
        dropdiv.detach(); 


        origcell.append(dropdiv); 
        dropcell.append(origdiv); 
      } 
    });

來源

2014-05-17 10:13:50 nmarsh

jQuery UI拖放拼圖

回答

相關問題