Home/ Questions/Q 8215299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T11:44:15+00:00

I’m trying to use $.sortable to implement a simple puzzle: <html> <head> <link href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css

  • 0

I’m trying to use $.sortable to implement a simple puzzle:

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

And while it works, it doesn’t work quite as well as I could wish. I can drag the letters about, but the placheholder doesn’t move as smoothly as I could wish, occasionally sticking in a certain location.

Is there anything I can do to make it move more smoothly?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One issue that you might be having is related to jQuery UI Bug #4759. You can read it here. Essentially, the problem is that the option connectWith is considerably slower during initialization, than after initialization. So all you need to do is move connectWith like so:

    $(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);
});

    Here’s the jsFiddle.

    • 0