jQuery-UI: sortable() placeholder feel sticky
Question
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?
1 answers
solution1
1 ACCPTED 2012-07-11 16:07:02
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.