jQuery的UI：排序（）佔位符不覺黏手

我試圖用$.sortable實現一個簡單的拼圖：jQuery的UI：排序（）佔位符不覺黏手

<html> 
    <head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <style> 
     span { 
     display: inline-block; 
     width: 1em; 
     text-align: center; 
     border: 1px solid; 
     background: white; 
     margin: 0 4px; 
     } 
     .vowel { color: red } 
     .vowel:hover { 
     cursor: pointer; 
     background: red; 
     color: white; 
     } 
     .word { padding: 5px } 
     #words, #vowels{ 
     float: left; 
     clear: both; 
     padding: 5px; 
     margin: 5px; 
     } 
     #words { border: 1px solid black } 
     #vowels { border: 2px solid red } 
     #vowels .placeholder { 
     display: none; 
     } 
     .word .placeholder { 
     width: 4px; 
     margin: -2px; 
     background: pink; 
     height: 1em; 
     border: none; 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#vowels,.word').disableSelection().sortable({ 
      cursor: 'pointer', 
      placeholder: 'placeholder', 
      cancel: '.consonant', 
      connectWith: '#vowels,.word', 
      helper: 'clone', 
      appendTo: 'body', 
      stop: function(event, ui) { 
      var $uiItem = $(ui.item); 
      if ($uiItem.parent().is('#vowels')) $uiItem.remove(); 
      } 
     }); 
     $('#vowels').bind('sortstart', function(event, ui){ 
      var $uiItem = $(ui.item); 
      $uiItem.clone().show().insertBefore($uiItem); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="vowels"> 
     <span class="vowel">A</span> 
     <span class="vowel">E</span> 
     <span class="vowel">I</span> 
     <span class="vowel">O</span> 
     <span class="vowel">U</span> 
     <span class="vowel">Y</span> 
    </div> 
    <div id="words"> 
     <div class="word"> 
     <span class="consonant">H</span> 
     <span class="consonant">P</span> 
     <span class="consonant">P</span> 
     </div> 
     <div class="word"> 
     <span class="consonant">B</span> 
     <span class="consonant">S</span> 
     <span class="consonant">H</span> 
     <span class="consonant">F</span> 
     <span class="consonant">L</span> 
     </div> 
     <div class="word"> 
     <span class="consonant">D</span> 
     <span class="consonant">C</span> 
     </div> 
     <div class="word"> 
     <span class="consonant">G</span> 
     <span class="consonant">R</span> 
     <span class="consonant">M</span> 
     <span class="consonant">P</span> 
     </div> 
     <div class="word"> 
     <span class="consonant">D</span> 
     <span class="consonant">P</span> 
     </div> 
     <div class="word"> 
     <span class="consonant">S</span> 
     <span class="consonant">N</span> 
     <span class="consonant">Z</span> 
     </div> 
     <div class="word"> 
     <span class="consonant">S</span> 
     <span class="consonant">L</span> 
     <span class="consonant">P</span> 
     </div> 
    </div> 
    </body> 
</html>

雖然它的工作原理，它不工作相當以及我求之不得。我可以拖動這些信件，但這個編排者不會像我所希望的那樣順利地移動，偶爾會粘在某個位置。

有什麼我可以做，讓它移動更順利？

來源

2012-05-01 rampion

您可能遇到的一個問題與jQuery UI Bug＃4759有關。您可以閱讀它here.本質上，問題是connectWith選項在初始化期間比初始化後慢很多。所以你需要做的就是像這樣移動connectWith：

$(function() { 
$('#vowels,.word').disableSelection().sortable({ 
    cursor: 'pointer', 
    placeholder: 'placeholder', 
    cancel: '.consonant', 
    helper: 'clone', 
    appendTo: 'body', 
    stop: function(event, ui) { 
     var $uiItem = $(ui.item); 
     if ($uiItem.parent().is('#vowels')) $uiItem.remove(); 
    } 
}).sortable(
    "option", "connectWith", '#vowels,.word' 
); 
$('#vowels').bind('sortstart', function(event, ui) { 
    var $uiItem = $(ui.item); 
    $uiItem.clone().show().insertBefore($uiItem); 
});

這裏是jsFiddle。

來源

2012-07-11 16:07:02 SeasonEnds

jQuery的UI：排序（）佔位符不覺黏手

回答

相關問題