jquery拖拽
原生js:
window.onload=function(){ var oBox=document.getElementById("box"); oBox.onmousedown=function(ev){ var e=ev||event; var disX=e.clientX-oBox.offsetLeft; var disY=e.clientY-oBox.offsetTop; document.onmousemove=function(ev){ var e=ev||event; var l=e.clientX-disX; var t=e.clientY-disY; oBox.style.left=l+'px'; oBox.style.top=t+'px'; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; oBox.releaseCapture&&oBox.releaseCapture(); } oBox.setCapture&&oBox.setCapture(); return false; } }
jquery版:
$(function(){ $('#box').mousedown(function(ev){ var disX=ev.clientX-$('#box').position().left; //position()是指到定位父级的相对距离,offset()到body的绝对距离 var disY=ev.clientY-$('#box').position().top; function move(ev){ var l=ev.clientX-disX; var t=ev.clientY-disY; $('#box')[0].style.left=l+'px'; //$('#box')[0]或者$('#box').get(0)将jquery转为js $('#box')[0].style.top=t+'px'; } function stop1(){ $(document).off('mousemove',move); $(document).off('mouseup',stop1); $('#box')[0].releaseCapture&&$('#box')[0].releaseCapture(); } $(document).on('mousemove',move); $(document).on('mouseup',stop1); $('#box')[0].setCapture&&$('#box')[0].setCapture(); return false; }); });
人生如戏,或实力或演技