2009-08-06 14 views
0

問題は、ドラッグアンドドロップの過程でハンドルでドラッグアンドドロップしようとすると、本文がテキストに揃えられないということです。最後に添付されているコードに示されています。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> 

答えて

1

問題はdiv要素は、ソートを行うためにドラッグされると、jQueryの効果的設定があるということですdraggable(そうdiv.cあなたのケースで)へ絶対に配置されている(画面上で動かすことができる)。正確なCSSの癖について(私がもっと詳しく説明できるよりも賢明かもしれませんが)、基本的に浮動小数点の.handleは、絶対配置されたコンテナの内側にあるpと組み合わせて奇妙に動作します。 pのマージンは、divの内側から設定されているように見えますが、spanはまだdivの左上に浮いています。

pについては、spanに同じ上端マージンを追加することですが、ドラッグしている間だけです。

あなたはCSSにもっと踏み込んに興味がある場合は
.ui-sortable-helper .handle { 
    margin-top: 1em; 
} 

、あなたの上記のコードに以下を追加します。つまり、以下のCSSを追加します(私は1empの上部に適用されるデフォルトのマージンすべきだと思います)あなたは関与sortablesを必要とせずに、問題を再現します&:

.c { width: 500px; height: 40px; position: absolute; } 
関連する問題