javascript -- (點擊div，隨滑鼠移動)

標籤：

涉及滑鼠三個事件:

onmousedown、onmousemove、onmouseup

<script type = "text/javascript">

　　var body = document.getElementsByTagName(‘body‘)[0];

　　//產生div，並設定其樣式

　　var box = document.createElement(‘div‘);

　　box.style.width = ‘100px‘;

　　box.style.height = ‘100px‘;

　　box.style.background = ‘blue‘;

　　box.style.position = ‘absolute‘;

　　box.onmousedown = function(event) {

　　　　event = event || window.event;

　　　　//擷取滑鼠點擊的位置距離div左邊的距離

　　　　var positionX = event.clientX - box.offsetLeft;

　　　　var positionY = event.clientY - box.offsetTop;

　　　　document.onmousemove = function(event) {

　　　　　　　event = event || window.event;??

　　　　　　　var divX = event.clientX - positionX;

　　　　　　　var divY = event.clientY - positionY;

　　　　　　　box.style.left = divX + ‘px‘;

　　　　　　　box.style.top = divY + ‘px‘;

　　　　}

　　　　document.onmouseup = function() {

　　　　　　　document.onmousemove = null;

　　　　}?　　

　　}

　　body.appendChild(box);

</script>

javascript -- (點擊div，隨滑鼠移動)