$('#title').on("mousedown",function(e){
console.log(e);
})
e包含了：（鼠标点击部分的四种方式）
相对于页面显示部分的左上角的定位（滚动条隐藏部分也算）
pageX
pageY
相对于页面显示部分的左上角的定位（可见范围内）
clientX
clientY
相对于当前元素的左上角的位置
offsetX
offsetY
相对于屏幕的左上角的位置
screenX
screenY
HTML5拖拽
在HTML标签上写一句：draggable=“true”
一个很好用的jq拖动插件
http://pep.briangonzalez.org/
skdding.github.io/dragdealer/
比如滑块，图片轮播，都可以用到这些插件
<div id="container" class="container"></div>
<div id="target" class="target" draggable="true"></div>
<img id="image" src="imooc.png" class="hide" />
<script>
(function($) {
$("#container")[0].ondrop = function(e) {
e.preventDefault();
console.log(e.dataTransfer);
var id = e.dataTransfer.getData("Text");
$(this).append($('#' + id));
};
$("#container")[0].ondragover = function(e) {
e.preventDefault();
};
$("#container")[0].ondragenter = function(e) {
e.preventDefault();
$(this).addClass("containerDrop");
};
$("#container")[0].ondragleave = function(e) {
e.preventDefault();
$(this).removeClass("containerDrop");
};
$("#target")[0].ondragstart = function(e) {
console.log(e.dataTransfer);
e.dataTransfer.setData("Text", e.target.id);
e.dataTransfer.setDragImage($("#image").clone().removeClass("hide")[0], 0, 0);
};
$("#target")[0].ondrag = function(e) {
console.log('drag');
}
$("#target")[0].ondragend = function(e) {
console.log('dragend');
}
})(jQuery);
</script>
