Pregunta jquery .sortable () en


Estoy tratando de dejar que el usuario clasifique este tipo de marcado

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

Y lo estoy intentando así:

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

Pero estoy recibiendo un comportamiento muy inesperado, por favor verifique:

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

¿Cómo puedo hacerlo para que el usuario solo pueda ordenar por el número del paso? (pero clasifique todo el artículo como un bloque)


32
2018-03-11 23:29


origen


Respuestas:


Creo que el siguiente violín es lo que buscas: http://jsfiddle.net/GA4Qs/13/

jQuery ordenable debe aplicarse al elemento principal que contiene los elementos que desea clasificar.

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

Además, no cerraste tus divs en el lugar correcto.

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

No

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

26
2018-03-11 23:44



Está convirtiendo .sort en el ordenable, cuando debe invocarse .sortable () en el contenedor de los elementos que desea ordenar. Lo que su código hace es crear 5 listas ordenables por separado.

Cambie a la selección basada en el contenedor primario y funciona:

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


5
2018-03-11 23:40



Este funciona bien para mí. Cambié tu selector para usar el nombre de clase "nubeT"

$(function() {

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

});​

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


1
2018-03-11 23:39