Javascript jQuery UI:sortable（）占位符感觉有粘性_Javascript_Jquery_Html_Jquery Ui_Jquery Ui Sortable

Javascript jQuery UI:sortable（）占位符感觉有粘性

javascript jquery html jquery-ui

Javascript jQuery UI:sortable（）占位符感觉有粘性,javascript,jquery,html,jquery-ui,jquery-ui-sortable,Javascript,Jquery,Html,Jquery Ui,Jquery Ui Sortable,我试图使用$.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;

我试图使用

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


跨度{
显示：内联块；
宽度：1米；
文本对齐：居中；
边框：1px实心；
背景：白色；
利润率：0.4px；
}
.元音{颜色：红色}
.元音：悬停{
光标：指针；
背景：红色；
颜色：白色；
}
.word{padding:5px}
#单词、元音{
浮动：左；
明确：两者皆有；
填充物：5px；
保证金：5px；
}
#单词{边框：1px纯黑}
#元音{边框：2px纯红}
#元音。占位符{
显示：无；
}
.word.placeholder{
宽度：4px；
保证金：-2px；
背景：粉红色；
高度：1米；
边界：无；
}
$（函数（）{
$（'#元音，.word'）.disableSelection（）.sortable({
光标：“指针”，
占位符：“占位符”，
取消：'.辅音'，
连接：“#元音，.单词”，
助手：“克隆”，
附于：'正文'，
停止：功能（事件、用户界面）{
var$uiItem=$（ui.item）；
如果（$uiItem.parent（）是（“#元音”）$uiItem.remove（）；
}
});
$（“#元音”）.bind（'sortstart'，函数（事件，用户界面）{
var$uiItem=$（ui.item）；
$uiItem.clone（）.show（）.insertBefore（$uiItem）；
});
});
A.
E
我
O
U
Y
H
P
P
B
s
H
F
L
D
C
G
R
M
P
D
P
s
N
Z
s
L
P

虽然它有效，但它并没有像我希望的那样有效。我可以把这些字母拖来拖去，但是这个挂牌架并没有像我希望的那样平稳地移动，偶尔会粘在某个地方

我可以做些什么来让它更顺利地运行吗？

您可能遇到的一个问题是与jQuery UI Bug#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);
});

这是我的建议