Jquery插件封装之拖动(Step1简单版)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>拖动插件的封装</title>
<style type="text/css">
body{
position: relative;
}
.conten{
width: 100px;
height: 100px;
position: absolute;
background: #ccc;
left: 0px;
top: 0px;
}
.conten2{
width: 100px;
height: 100px;
position: absolute;
background: #111;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="conten">
1
</div>
<div class="conten2">
2
</div>
</body>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/harold.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('.conten2').harold_drag();
$('.conten').harold_drag();
});
</script>
</html>
harold.js文件
//采用$.fn形式封装插件
(function($){
//插件名称
$.fn.harold_drag = function(options){
$(this).on('mousedown',function(e){
$this = $(this);
var x = e.clientX;
var y = e.clientY;
var ox = $(this).offset().left;
var oy = $(this).offset().top;
$(document).on('mousemove',function(e){
var nx = e.clientX;
var ny = e.clientY;
$this.css({
top : ny - (y -oy),
left : nx - (x -ox)
});
}).on('mouseup',function(e){
$(document).off();
});
});
};
})(jQuery);
浙公网安备 33010602011771号