Javascript 使落下时可拖动的卡扣向左移动
**编辑** 我目前正在创建一个拖放拼写游戏,用户将字母拖到突出显示的单词上,以便拼写并显示后面的图像 当一个单词被“.spellword”样式突出显示时,它指示用户拼写该单词。当用户将一个字母拖到该区域时,他/她可以将该字母拖到3个字母空间中的任何位置,但我需要将其从“左”拖到“右”,以确保该单词的拼写顺序正确Javascript 使落下时可拖动的卡扣向左移动,javascript,jquery,jquery-ui,drag-and-drop,Javascript,Jquery,Jquery Ui,Drag And Drop,**编辑** 我目前正在创建一个拖放拼写游戏,用户将字母拖到突出显示的单词上,以便拼写并显示后面的图像 当一个单词被“.spellword”样式突出显示时,它指示用户拼写该单词。当用户将一个字母拖到该区域时,他/她可以将该字母拖到3个字母空间中的任何位置,但我需要将其从“左”拖到“右”,以确保该单词的拼写顺序正确 基本上,当一个字母落在单词上时,我需要它向左对齐(单词的第一个字母),然后落下的下一个字母会对齐单词的下一个字母等等……因此它的拼写顺序正确 我能做些什么来确保这一点? 可拖动和可拖放
基本上,当一个字母落在单词上时,我需要它向左对齐(单词的第一个字母),然后落下的下一个字母会对齐单词的下一个字母等等……因此它的拼写顺序正确 我能做些什么来确保这一点? 可拖动和可拖放的脚本是
$('.drag').draggable({
helper: 'clone',
snap: '.drop',
grid: [62, 62],
revert: 'invalid',
snapMode: 'corner',
start: function(){
var validDrop = $('.drop-box.spellword');
validDrop.addClass('drop');
makeDroppables();
}
});
function makeDroppables(){
$('.drop').droppable({
drop: function(event, ui) {
word = $(this).data('word');
guesses[word].push($(ui.draggable).attr('data-letter'));
if ($(this).text() == $(ui.draggable).text().trim()) {
$(this).addClass('wordglow3');
} else {
$(this).addClass('wordglow');
}
if (guesses[word].length == 3) {
if (guesses[word].join('') == word) {
$('td[data-word=' + word + ']').addClass('wordglow2');
} else {
$('td[data-word=' + word + ']').addClass("wordglow4");
guesses[word].splice(0, guesses[word].length);
}
}
},
activate: function(event, ui) {
word = $(this).data('word');
// try to remove the class
$('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
}
});
}
可拖动的HTML是
<div class="squares">
<div id="drag1" class="drag ui-widget-content box-style2" tabindex="0" data-letter="a">
<p>a</p>
</div>
<div id="drag2" class="drag ui-widget-content box-style" tabindex="0" data-letter="b">
<p>b</p>
</div>
<div id="drag3" class="drag ui-widget-content box-style" tabindex="0" data-letter="c">
<p>c</p>
</div>
<div id="drag4" class="drag ui-widget-content box-style" tabindex="0" data-letter="d">
<p>d</p>
</div>
<div id="drag5" class="drag ui-widget-content box-style2" tabindex="0" data-letter="e">
<p>e</p>
</div>
<div id="drag6" class="drag ui-widget-content box-style" tabindex="0" data-letter="f">
<p>f</p>
</div>
<div id="drag7" class="drag ui-widget-content box-style" tabindex="0" data-letter="g">
<p>g</p>
</div>
<div id="drag8" class="drag ui-widget-content box-style" tabindex="0" data-letter="h">
<p>h</p>
</div>
<div id="drag9" class="drag ui-widget-content box-style2" tabindex="0" data-letter="i">
<p>i</p>
</div>
<div id="drag10" class="drag ui-widget-content box-style" tabindex="0" data-letter="j">
<p>j</p>
</div>
<div id="drag11" class="drag ui-widget-content box-style" tabindex="0" data-letter="k">
<p>k</p>
</div>
<div id="drag12" class="drag ui-widget-content box-style" tabindex="0" data-letter="l">
<p>l</p>
</div>
<div id="drag13" class="drag ui-widget-content box-style" tabindex="0" data-letter="m">
<p>m</p>
</div>
<div id="drag14" class="drag ui-widget-content box-style" tabindex="0" data-letter="n">
<p>n</p>
</div>
<div id="drag15" class="drag ui-widget-content box-style2" tabindex="0" data-letter="o">
<p>o</p>
</div>
<div id="drag16" class="drag ui-widget-content box-style" tabindex="0" data-letter="p">
<p>p</p>
</div>
<div id="drag17" class="drag ui-widget-content box-style" tabindex="0" data-letter="r">
<p>r</p>
</div>
<div id="drag18" class="drag ui-widget-content box-style" tabindex="0" data-letter="s">
<p>s</p>
</div>
<div id="drag19" class="drag ui-widget-content box-style" tabindex="0" data-letter="t">
<p>t</p>
</div>
<div id="drag20" class="drag ui-widget-content box-style2" tabindex="0" data-letter="u">
<p>u</p>
</div>
</div>
a
b
c
d
e
f
g
h
我
j
k
l
m
n
o
p
r
t
u
我不完全理解您的问题,但只要看看您的代码,这似乎是我要改变的:
revert: function(droppable) {
return !droppable;
});
如果您的意思是需要访问第一个元素,然后是第二个元素,然后是第三个元素,以此类推,这样您就可以使用css中的float:left属性,以便div在容器中按正确的顺序排列您可以将可排序ui与draggable结合使用。然后,
float:left
正如用户1555320所建议的那样……类似这样:
$('.drop').sortable({revert:true, axis:'x'});
$('.drag').draggable({
connectToSortable:'.drop',
helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: function(droppable) {
if (droppable === false) {
return true;
}
else {
return false;
}
}
});
然后你的css
.drop div {
float:left;
}
您可以尝试在DIV上使用CSS float作为捕捉效果。可能类似于下面的内容
#mainlist {
width: 20%;
float: left;
padding: 2px;
}
澳新银行和malificent的答案都是好的,但是,确保排序为“last one-in-place as last”的字母和将位置设置为relative将是更好的解决方案,因为如果您想应用进一步的样式,它将避免CSS中的一些陷坑
#mainlist {
width: 20%;
position: relative;
padding: 2px;
max-height: 65px;
}
就我个人而言,我不喜欢使用CSS来实现这种效果。为什么不把这封信写在单词的第一个空白处呢?这似乎达到了预期的效果:
基本上,当一个字母落在单词上时,它会弹到左边(单词的第一个字母),然后落下的下一个字母会弹到单词的下一个字母等等……因此它的拼写顺序是正确的@Rickyc你能添加一个关于这个问题的html摘录吗?我在@AnzI上面添加了一个提琴在@Miracles上面添加了一个提琴
$('.drop').droppable({
...
drop: function(event, ui) {
word = $(this).data('word');
//change context from this to that
that = $('.spellword')[guesses[word].length];
guesses[word].push($(ui.draggable).attr('data-letter'));
if ($(that).text() == $(ui.draggable).text().trim()) {
$(that).addClass('wordglow3');
} else {
$(that).addClass('wordglow');
}
if (guesses[word].length == 3) {
if (guesses[word].join('') == word) {
$('td[data-word=' + word + ']').addClass('wordglow2');
} else {
$('td[data-word=' + word + ']').addClass("wordglow4");
guesses[word].splice(0, guesses[word].length);
}
}
},
...