jQuery-UIでdiv要素をぐりぐり動かす

まずhtml5で記述するとどうなるか
①ドラッグ

<script>
  function f_dragstart(event){
    //ドラッグするデータのid名をDataTransferオブジェクトにセット
    event.dataTransfer.setData("text", event.target.id);
  }
</script>

～～～～～

<div id="div1" draggable="true" ondragstart="f_dragstart(event)" style="position: relative;">～</div>

draggable="true"とすることによってその要素をドラッグ可能にする。イベントについてはondragstartで定義し、それはscriptタグに記述する必要がある。

②ドロップ

/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
function f_dragover(event){
  //dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
  event.preventDefault();
}

/***** ドロップ時の処理 *****/
function f_drop(event){
  //ドラッグされたデータのid名をDataTransferオブジェクトから取得
  var id_name = event.dataTransfer.getData("text");
  //id名からドラッグされた要素を取得
  var drag_elm =document.getElementById(id_name);
  //ドロップ先にドラッグされた要素を追加
  event.currentTarget.appendChild(drag_elm);
  //エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
  event.preventDefault();
}

～～～～～

<div id="div3" dropzone="move" ondragover="f_dragover(event)" ondrop="f_drop(event)">～</div>

dropzoneに処理形式を記述し、ドラッグと同様にondragover、ondropでイベントを定義する。

サンプルでは基本的な記述しか説明したいないが、jQuery-UIと同様、様々なタイミングでイベントを取得できる。

参考としたサイトを以下に記す。
http://www.htmq.com/dnd/

また、前回あれこれと話題に上がったリサイズについては、CSS3のresizeプロパティを指定することで実現できる。

resize: both;

こちらについては以下を参照。
http://www.htmq.com/css3/resize.shtml

HTML5での実現→リサイズ以外はJavaScript制御が必要

ではこれらをjQueryUIを用いて実現しようとするとどうなるか

$("要素").draggable(); //ドラッグ可能にする
$("要素").droppable(); //ドロップ領域に指定する
$("要素").resizable(); //リサイズ可能にする

それぞれがたったこれだけで実現できる（勿論イベント処理の記述は必要ではあるが）

以下リファレンスサイト(順にドラッグ、ドロップ、リサイズ)
http://jqueryui.com/draggable/
http://jqueryui.com/droppable/
http://jqueryui.com/resizable/