标签：元素 use targe down order oct body fun posix
$(function () { $(document).mousemove(function (e) { if (!!this.move) { var posix = !document.move_target ? { ‘x‘: 0, ‘y‘: 0 } : document.move_target.posix, callback = document.call_down || function () { $(this.move_target).css({ ‘top‘: e.pageY - posix.y, ‘left‘: e.pageX - posix.x }); }; callback.call(this, e, posix); } }).mouseup(function (e) { if (!!this.move) { var callback = document.call_up || function () { }; callback.call(this, e); $.extend(this, { ‘move‘: false,//是否执行触发操作 ‘move_target‘: null, //操作的元素对象 ‘call_down‘: false, //mousemove的时候的回调函数，传回来的this指向document ‘call_up‘: false //当鼠标弹起的时候执行的回调函数，传回来的this指向document }); } }); var $box = $(‘.box‘).mousedown(function (e) { var offset = $(this).offset(); this.posix = { ‘x‘: e.pageX - offset.left, ‘y‘: e.pageY - offset.top }; $.extend(document, { ‘move‘: true, ‘move_target‘: this }); }); });
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖放</title>
<script src="JScript/jquery.min.js"></script>
<script src="JScript/test/test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #eee;
}
.box {
width: 200px;
height: 100px;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
background-color: #ffee00;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
}
.main_tabletop {
width: 100%;
height: 20px;
background: #ffee00;
}
</style>
</head>
<body>
<div class="box">
<div class="main_tabletop">我是可以拖动的标题</div>
</div>
</body>
</html>
标签：元素 use targe down order oct body fun posix
原文地址：https://www.cnblogs.com/94LH-shuai/p/10234758.html
