鼠标拖动div移动js代码
生活随笔
收集整理的這篇文章主要介紹了
鼠标拖动div移动js代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.代碼
var disX=0;var disY=0;$('.private_area').on('mousedown',function(event) {disX=event.clientX-$('.private_area')[0].offsetLeft;disY=event.clientY-$('.private_area')[0].offsetTop;$(document).mousemove(function(event) {var l=event.clientX-disX;var t=event.clientY-disY;if(l<0){l=0;}else if(l>document.documentElement.clientWidth-$('.private_area')[0].offsetWidth){l=document.documentElement.clientWidth-$('.private_area')[0].offsetWidth;}if(t<0){t=0;}else if(t>document.documentElement.clientHeight-$('.private_area')[0].offsetHeight){t=document.documentElement.clientHeight-$('.private_area')[0].offsetHeight;}$('.private_area').css({left: l,top: t,marginTop:0,marginLeft:0});});$(document).mouseup(function(event) {$(document).off('mousemove');$(document).off('mouseup');});event.stopPropagation();});注:綁定class元素即可 《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的鼠标拖动div移动js代码的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux下的网络远程安装
- 下一篇: 利用JFreeChart生成简单柱状图(