Uma falha em arrastar classificáveis ??pela alça em jQuery UI

StackOverflow https://stackoverflow.com/questions/1237157

Pergunta

O problema que tem é que, sempre que tentar arrastar e soltar com um punho, no processo de arrastar e largar, o texto do corpo não vai ficar alinhado com o texto, que é ilustrado no código anexado no final.

A razão pela qual eu prefiro não colocar a alça nas tags <p>, como alguns dos exemplos sobre os shows da web, é que eu gostaria de permitir ao usuário no lugar editar o material entre as tags p, portanto i don 't quer ir e fazer um monte de processamento de pré (i pode adicionar mais coisas ao redor das marcas P) antes de exibir o formulário.

Se alguém pode lançar alguma luz sobre este assunto, seria muito apreciada!

código, usando o Google CDN, por isso deve apenas trabalho: 

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    .
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#container').sortable({
            revert:true,
            handle:'.handle',
        });
    });
    </script>
</head>
<div id="container">
<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>

<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>
Foi útil?

Solução

O problema é que quando o div é arrastado para fazer a triagem, jQuery efetivamente do draggable set (assim div.c no seu caso) para ser posicionado de forma absoluta (por isso pode movê-la ao redor da tela). Não tenho certeza sobre as peculiaridades exatas CSS (talvez alguém mais sábio do que eu posso explicar mais detalhadamente), mas basicamente o seu .handle flutuante atua um pouco estranhamente em conjunto com o p quando dentro de um recipiente posicionado de forma absoluta. As margens no p agora parecem ser definido a partir do interior da div em vez de se fundir com eles, enquanto o span ainda está flutuando para o topo esquerdo da div.

Uma solução é adicionar a mesma margem superior à span quanto à p, mas apenas enquanto a sua arrastando. Em outras palavras, adicione o seguinte CSS (eu acho 1em deveria ser a margem padrão aplicada ao topo da p): 

.ui-sortable-helper .handle {
    margin-top: 1em;
}

Se você está interessado em se aprofundar mais no CSS, adicione o seguinte ao seu código acima e você vai reproduzir o problema sem a necessidade dos sortables envolvidos: 

.c { width: 500px; height: 40px; position: absolute; }
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top