<div> 上的 jquery .sortable()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9659966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery .sortable() on <div>
提问by Toni Michel Caubet
I am trying to let user sort this kind of markup
我试图让用户对这种标记进行排序
<div id="steps">
<div class="sort">
<span></span>
<textarea/>
</div>
<div class="sort">
<span></span>
<textarea/>
</div>
<div class="sort">
<span></span>
<textarea/>
</div>
<div class="sort">
<span></span>
<textarea/>
</div>
</div>
And i am trying like this:
我正在尝试这样：
$('.sort').sortable({placeholder: "ui-state-highlight",helper:'clone'}).disableSelection();
But i am getting very unexpected behavior, please check:
但我得到了非常意外的行为，请检查：
how can i do it to only let user sort by the step number? (but sort the whole item as a block)
我该怎么做才能让用户按步骤编号排序？（但将整个项目作为一个块进行排序）
采纳答案by Leonard Garvey
I believe the following fiddle is what you're after: http://jsfiddle.net/GA4Qs/13/
我相信以下小提琴是您所追求的：http: //jsfiddle.net/GA4Qs/13/
jQuery sortable needs to be applied to the parent element containing the elements you want to be sorted.
jQuery sortable 需要应用于包含要排序的元素的父元素。
$('#psP').sortable({placeholder: "ui-state-highlight",helper:'clone'});
Also you didn't close your divs in the right place.
你也没有在正确的地方关闭你的 div。
<div style="position: relative;" class="sortable">
<span class="stepNum inset">1</span>
<textarea placeholder="Escribe que hay que hacer en este paso" class="step valid"></textarea>
</div>
Not
不是
<div style="position: relative;" class="sortable">
<span class="stepNum inset">1</span>
<textarea placeholder="Escribe que hay que hacer en este paso" class="step valid"></textarea>
<div style="position: relative;" class="sortable">
回答by Magneon
You're turning .sort into the sortable, when .sortable() should be called on the container of the items you want to sort. What your code does is create 5 separate sortable lists.
当 .sortable() 应该在要排序的项目的容器上调用时，您正在将 .sort 转换为可排序的。您的代码所做的是创建 5 个单独的可排序列表。
Switch to selecting based on the parent container, and it works:
切换到基于父容器的选择，它的工作原理：
回答by Shyju
This one is working fine for me. I changed your selector to use the class name"nubeT"
这个对我来说很好用。我将您的选择器更改为使用类名“nubeT”
$(function() {
$('.nubeT').sortable({
placeholder: "ui-state-highlight",
helper: 'clone'
});
});?
