自動目錄
網頁想要做到拖拉區塊的功能，但又不想使用他人的插件或是 jquery-ui的話，怎麼做？
此篇主要是參考 https://codepen.io/sun_kao/pen/DkFla 的範例修改，原範例的做法是物件用position:absolute此範例改position:fixed。
此功能主要是做個訊息框，只留下區塊的拖拉 drag and drop 的效果。
差別在於顯示的部分，margin-top 和 margin-left 有退縮 -200px。
HTML
<div id="centermsg" > 訊息欄 <div id="closemsg">X 關閉</div> <div id="msgbody">訊息本文 </div> </div>
CSS
#centermsg {
z-index:9999;
position: fixed;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-200px;
background:black;
width:400px;
height:350px;
}
#msgbody {
background: black;
color:white;
}
說明
第3行 css的重點是 第三行position要設為絕對absolute或是固定fixed;
第6~7行 為了置中對齊，因此要退縮邊界為寬度的一半，就能置中。
JQUERY
var x,y,key;
$('#centermsg').bind({
mousedown: function(event){
var object = $(this).offset();
x = event.pageX-object.left;
y = event.pageY-object.top;
key = true; },
mousemove: function (event){
if(key){ $(this).css({'top':event.clientY-y+200, 'left':event.clientX-x+200 }); }},
mouseup: function (){ key =false; }
});
說明：
第1行 設定外部變數，(x,y) 為滑鼠按下時在 <div id='centermsg'>中的相對位置，key 按下滑鼠mousedown啟動，mouseup時關閉移動的開關。
第5~6行 滑鼠位置- 左上角的位置取得按下時的div中相對位置
第9行 滑鼠在畫面上相對位置 - 相對位置 + 退縮的200 = 左上角的位置
參考資料
[1] https://codepen.io/sun_kao/pen/DkFla
END
