掴んで移動させられるUI部品

こんな感じ。

drag me!
$(function(){

var ie = navigator.userAgent.match(/MSIE ([\d.]+)/);
if (ie) ie = parseFloat(ie[1]);

var movable = $('#id20120418a').find('.movable');

movable.bind('mousedown', function(e) {
  // 右クリックでコンテクストメニューが出るときはmousedownは出てもmouseupが出ないので、左クリックでしかドラグ開始しないようにする
  if (ie && ie < 9) {
    // IE8までは左クリックが1
    if (e.button !== 1) return;
  } else {
    // それ以外は左クリックが0
    if (e.button !== 0) return;
  }

  // ここはその要素の表示箇所によって top/left だったり margin-top/margin-left だったりする
  var top = parseFloat(movable.css('top')) || 0;
  var left = parseFloat(movable.css('left')) || 0;
  var x0 = e.pageX, y0 = e.pageY;

  movable.addClass('dragging');

  // ドラグ中に下の要素をガーっと選択しちゃうことがある
  $(document.body).css({
    '-webkit-user-select': 'none',
    '-moz-user-select': 'none',
    '-ms-user-select': 'none',
    'user-select': 'none'
  });

  function onmousemove(e) {
    movable.css('top', top + e.pageY - y0);
    movable.css('left', left + e.pageX - x0);
  }

  function onmouseup(e) {
    onmousemove(e);
    movable.removeClass('dragging');

    $(document.body).css({
      '-webkit-user-select': '',
      '-moz-user-select': '',
      '-ms-user-select': '',
      'user-select': ''
    });    

    $(document).unbind('mousemove', onmousemove).unbind('mouseup', onmouseup);
  }

  // 常にmousemoveを監視するのは重いので、mousedownのタイミングでmousemoveをつける
  // windowで監視しちゃうとIE8でマウスイベントが取れないのでdocumentで監視
  $(document).bind('mousemove', onmousemove).bind('mouseup', onmouseup);
});

});

JSFiddleもペタリ