jQuery UI

要素の並べ替えとドラッグ＆ドロップ
●特定の要素を並べ替え可能にする

$('div#webtech').sortable({item:'>p',placeholder:'sortable-hover'});

CSS設定

div#webtech{width:500px;}
div#webtech > p{margin:5px;padding:5px;border:1px dashed #000;background-color:#ffc;}
span.bold{font-weight:bold;}
span.text{font-sizet:small;}
.ui-sortble {border:1px solid #000;}
.ui-sortble, .sortable-hover{cursor:move;}
.sortable-hover{background-color:red;}
ドラッグでp要素を移動出来る。.sortable-hoverのCSSが適用されない。何故？


実行例　

HTML タグでWebページの構造を記述する 　

CSS タグでWebページの構造を記述する 　

javaScript タグでWebページの構造を記述する 　

jQuery タグでWebページの構造を記述する 　

Wevサーバー タグでWebページの構造を記述する 　


html
<div id="webtech">
  <p>
    <span class="bold">HTML</span>
    <span class="text">タグでWebページの構造を記述する</span>
　</p>
  <p>
    <span class="bold">CSS</span>
    <span class="text">タグでWebページの構造を記述する</span>
　</p>
  <p>
    <span class="bold">javaScript</span>
    <span class="text">タグでWebページの構造を記述する</span>
　</p>
  <p>
    <span class="bold">jQuery</span>
    <span class="text">タグでWebページの構造を記述する</span>
　</p>
  <p>
    <span class="bold">Wevサーバー</span>
    <span class="text">タグでWebページの構造を記述する</span>
　</p>
</div>

実行後のHTML