Глюк в перетаскивании сортируемой ручкой в ​​jquery UI - PullRequest
Новая
       12

Глюк в перетаскивании сортируемой ручкой в ​​jquery UI

0 голосов
/ 06 августа 2009

Проблема, с которой я столкнулся, заключается в том, что всякий раз, когда я пытаюсь перетащить с помощью дескриптора, в процессе перетаскивания основной текст не останется выровненным по отношению к тексту, что показано в коде, прикрепленном в конце.

Причина, по которой я предпочитаю не помещать ручку в теги <p>, как показывают некоторые примеры в Интернете, заключается в том, что я хотел бы позволить пользователю на месте редактировать материал между тегами p, поэтому я не хочу идти и делать большую предварительную обработку (я могу добавить больше вещей вокруг тегов p) перед отображением формы.

Если кто-то может пролить свет на этот вопрос, это было бы очень признательно!

Код, используя Google CDN, поэтому он должен просто работать: 

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

1 Ответ

1 голос
/ 06 августа 2009

Проблема в том, что когда div перетаскивается для выполнения сортировки, jQuery эффективно устанавливает draggable (так, например, div.c в вашем случае) как абсолютно позиционированное (чтобы оно могло перемещаться по экрану). Не уверен насчет точных причуд CSS (возможно, кто-то умнее, чем я могу объяснить более полно), но в основном ваш плавающий .handle ведет себя немного странно в сочетании с p в абсолютно позиционированном контейнере. Поля на p теперь, похоже, устанавливаются изнутри div, а не сливаются с ними, в то время как span все еще плавает в верхнем левом углу div.

Одним из решений является добавление того же верхнего поля к span, что и к p, но только при его перетаскивании. Другими словами, добавьте следующий CSS (я думаю, что 1em должно быть полем по умолчанию, применяемым к вершине p): 

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

Если вы заинтересованы в углублении в CSS, добавьте следующее в приведенный выше код, и вы воспроизведете проблему, не прибегая к сортировке: 

.c { width: 500px; height: 40px; position: absolute; }
...