jQuery-UI:sortable(） 占位符感觉很粘

jQuery-UI: sortable() placeholder feel sticky

本文关键字：感觉 占位符 sortable jQuery-UI      更新时间：2023-09-26

我正在尝试使用$.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>

虽然它有效，但它并没有像我希望的那样好。 我可以拖拽字母，但牌卒并不像我希望的那样平稳移动，偶尔会粘在某个位置。

我能做些什么来让它更平稳地移动吗？

您可能遇到的一个问题与jQuery UI错误#4759有关。你可以在这里阅读。从本质上讲，问题在于选项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。

相关文章：