SOURCE

var myDiv = document.getElementById('drag'),
closeDiv = firstChild(myDiv);
addEvent(myDiv, "mousedown", drag);
addEvent(myDiv, "mouseup", undrag);
addEvent(closeDiv, "click", close);
function drag(event) {
  //鼠标按下时，鼠标与盒子之间的距离
  var xx = event.clientX - myDiv.offsetLeft,
  xy = event.clientY - myDiv.offsetTop,
  maxW = (document.documentElement.clientWidth || document.body.clientWidth) - myDiv.offsetWidth - 10,
  maxY = (document.documentElement.clientHeight || document.body.clientHeight) - myDiv.offsetHeight;
  document.onmousemove = function(e) {
    l = e.clientX - xx;
    t = e.clientY - xy;
    if (l <= 0) {
      l = 0;
    } else if (l > maxW) {
      l = maxW;
    }
    if (t <= 10) {
      t = 10;
    } else if (t > maxY) {
      t = maxY
    }
    myDiv.style.left = l + "px";
    myDiv.style.top = t + "px";
  }
}
function addEvent(e, type, handle) {
  if (e.addEventListener) {
    e.addEventListener(type, handle);
  } else if (e.attchEvent) {
    e.attchEvent("on" + type, handle);
  } else {
    e["on" + type] = handle;
  }
}
function firstChild(e) {
  var childList = e.childNodes,
  len = childList.length;
  for (var i = 0; i < len; i++) {
    if (childList[i].nodeType == 1 && childList[i].tagName == 'DIV') {
      return childList[i];
    }
  }
  return null;
}
function undrag() {
  document.onmousemove = 'null';
}

// document.select("li").onmousedown=funcgtion(){
// }

<div id=drag>
  XXXXX xxx
</div>
<ul>
  <li>
    asdf
  </li>
  <li>
    f我和草原有约定d
  </li>
  <li>
    sdfg
  </li>
  <li>
    共同的歌
  </li>
  <li>
    4334rfd
  </li>
  <li>
    sdfds
  </li>
  <li>
    cva
  </li>
  <li>
    sdddddfds
  </li>
</ul>

#drag {
  position: absolute;
  padding: 10px;
  background: #49f;
  width: 100px;
  cursor: default;
  color: #FFF;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

li {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
   background:#444;
  color:#FFF;
  padding:10px;
  margin-top:10px;
}