2

我正在尝试使用$.sortable来实现一个简单的难题：

<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>

虽然它有效，但它并没有我希望的那么好。我可以拖动字母，但占位符的移动并不如我所愿，偶尔会卡在某个位置。

我能做些什么让它更顺利地移动吗？

4

1 回答 1

1

您可能遇到的一个问题与 jQuery UI Bug #4759 有关。你可以在这里阅读。本质上，问题在于选项 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-11T16:07:02.117 回答