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

発生している可能性のある問題の1つは、jQuery UIのバグ＃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 に答える