jQueryの基本

jQuery UI

要素の並べ替えとドラッグ＆ドロップ●点線の枠のみをドラッグする（動作しない）

$('div#ex1').draggable( {
  cursorAt:{top:20,left:20},
  helper:function(){
         return $('<div class="helper-class" />');
        }
} );

上のcontainment:'parent'で親要素の外にはでなくなる。

CSS設定

.ui-sortable{cursor:move;}           /*マウスカーソルの形状を変更*/
.ui-sortable-disabled{cursor:auto;}  /*マウスカーソルの形状を変更*/
div#ex1{width: 100px; height: 100px; background-color: #fc9;}
.helper-classt{width:100px; height:100px; border:1px dashed #000; background-color: transparent;}

実行例　<div class="helper-class"></div> 。

ドラッグされる要素

html

<div id="ex1">ドラッグされる要素</div>