Сбой при перетаскивании сортировки по дескриптору в jquery ui

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

Причина, по которой я предпочитаю не помещать дескриптор в теги <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>

источник

2009-08-06 FurtiveFelon

Проблема заключается в том, что, когда ДИВ тащится сделать сортировку, 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; }

источник

2009-08-06 07:05:57 Alconja

Сбой при перетаскивании сортировки по дескриптору в jquery ui

ответ

Смежные вопросы