前端jq版鼠标拖拽开发

前端用的什么开发工具|linux web前端开发工具|js前端开发面试题
html 代码

<!DOCTYPE html>

<title>web前端开发的主要开发工具</title>

<style>

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

#main {

width: 300px;

height: 300px;

left: 50%;

top: 50%;

position: absolute;

background: antiquewhite;

}

#main-top {

width: 300px;

height: 50px;

background: #c7cecd;

cursor: move;

}

</style>

</head>

<body>

</div>

$(function () {

var main = $(“#main”);

var box = $(‘#main-top’);

var offx = 0;

var offy = 0;

var mainw = main.width();

var mainh = main.height();

//鼠标按下

box.mousedown(function (ev) {

var ev = ev || window.event;

//算出点击内容里面的位置

offx = ev.pageX – main.offset().left;

offy = ev.pageY – main.offset().top;

//按下过程中

$(document).bind(“mousemove”, function (ev) {

var ev = ev || window.event;

//isdraging=true;

//当前鼠标的位置

var mousex = ev.pageX;

var mousey = ev.pageY;

// 动态算出盒子距离屏幕边缘的距离

var xinx = mousex – offx;

var xiny = mousey – offy;

//可视区宽高

var pagewidth = document.documentElement.clientWidth;

var pageheight = document.documentElement.clientHeight;

//算出盒子边缘距离屏幕的距离

var maxx = pagewidth – mainw;

var maxy = pageheight – mainh;

//xinx>0 并且 xinx<（页面最大宽度 – 浮层的宽度）

//xiny>0 并且 xiny<(页面最大宽度 -浮层的高度)

xinx = Math.min(maxx, Math.max(0, xinx));

xiny = Math.min(maxy, Math.max(0, xiny));

// 盒子的偏移量

main.css({ left: xinx + “px” })

main.css({ top: xiny + “px” })

})

//抬起

$(document).mouseup(function () {

$(this).unbind(‘mousemove’);

})

</script>

</body>

</html>

前端开发工具subline|腾讯前端开发电话面试题|前端开发工具vs开发工具

前端jq版鼠标拖拽开发

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发