<div> 上的 jquery .sortable()

Posted 2023-02-24

【中文标题】<div> 上的 jquery .sortable()

【英文标题】：jquery .sortable() on <div>

【发布时间】：2012-03-28 10:23:54

【问题描述】：

我试图让用户对这种标记进行排序

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

我正在尝试这样：

$('.sort').sortable(placeholder: "ui-state-highlight",helper:'clone').disableSelection();

但是我遇到了非常意外的行为，请检查：

http://jsfiddle.net/GA4Qs/8/

我怎样才能只让用户按步数排序？ （但将整个项目排序为一个块）

【参考方案1】：

我相信以下小提琴是您所追求的：http://jsfiddle.net/GA4Qs/13/

jQuery sortable 需要应用于包含要排序的元素的父元素。

$('#psP').sortable(placeholder: "ui-state-highlight",helper:'clone');

你也没有在正确的地方关闭你的 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>

没有

<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">

【参考方案2】：

当 .sortable() 应该在要排序的项目的容器上调用时，您正在将 .sort 转换为可排序的。您的代码所做的是创建 5 个单独的可排序列表。

切换到基于父容器的选择，就可以了：

http://jsfiddle.net/vRCp8/1/

【参考方案3】：

这个对我来说很好用。我将您的选择器更改为使用类名“nubeT”

$(function() 

    $('.nubeT').sortable(
        placeholder: "ui-state-highlight",
        helper: 'clone'
    );

);​

http://jsfiddle.net/GA4Qs/11/