首页 > Web开发 > 详细

jquery_拖动事件

时间:2020-09-13 10:47:21      阅读:69      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<div class="box" style="width: 600px;position: absolute;border: red 1px solid">
<div id="title" style="height: 40px;color:white;background-color: black">内容</div>
<div style="height: 200px">标题</div>
</div>

<script src="jquery-3.5.1.js"></script>
<script>

$(‘#title‘).mouseover(function () {
$(this).css(‘cursor‘,‘move‘)
}).mousedown(function (event) {
var start_x=event.screenX;
var start_y=event.screenY;

var parent_left=$(this).parent().offset().left;
var parent_top=$(this).parent().offset().top;

$(this).mousemove(function (event) {
var new_x=event.screenX;
var new_y=event.screenY;

var new_parent_left=parent_left+new_x-start_x;
var new_parent_top=parent_top+new_y-start_y;

$(this).parent().css(‘left‘,new_parent_left+"px");
$(this).parent().css(‘top‘,new_parent_top+"px");
}).mouseup(function () {
$(this).off("mousemove");
})

})

</script>

</body>
</html>

jquery_拖动事件

原文:https://www.cnblogs.com/zxy01/p/13660422.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!