首先，先写一个盒子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽盒子</title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/dragDiv.js" ></script>
<style>
*{
margin: 0px;
}
#box{
position: absolute;
width: 150px;
height: 150px;
text-align: center;
line-height: 150px;
background: indianred;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="box">拖动</div>
盒子完成后就可以写插件了。---------------------
插件代码如下：
;(function($){
$.fn.dragDiv=function(options){
// alert(123)
var deafults = {
"background":"red"
}
var settings = $.extend(deafults,options);
// console.log(settings)
this.each(function(e){
//拖得逻辑
$(function(){
$("#box").mousedown(function(e){
var disX = e.pageX - $("#box").offset().left
var disY = e.pageY - $("#box").offset().top
// console.log(disX)
$(document).mousemove(function(e){
var l = e.pageX - disX
var t = e.pageY - disY
console.log($(window).height())
if(l<0){
l = 0
}
if(t<0){
t = 0
}
if(t>$(window).height()-$("#box").height()){
t = $(window).height()-$("#box").height()
}
if(l>$(window).width()-$("#box").width()){
l = $(window).width()-$("#box").width()
}
$("#box").css({
"background":settings.background,
"left":l,
"top":t
})
})
$(document).mouseup(function(){
$(document).off("mousemove")
})
})
})
})
}
})(jQuery)
-------------插件代码分析：---------------
首先一开始套用插件的模板样式。如下：
;(function($){
$.fn.dragDiv=function(options){
var defaults={
}
var options=$.extend(defaults,options);
this.each(function(){
var _this = $(this)
})
}
})(jQuery)
-----注意：要注重命名的规范性 以及 分清该this指的是谁，搞清此this的对象。
------然后继续分析：
var deafults = {
"background":"red"
}
此代码的意思是给该盒子的默认颜色为红色。（当然你也可以在调用的样式的时候给他另外换一个颜色）。
------然后就是拖动盒子的逻辑了：请看以下代码。
$(function(){
$("#box").mousedown(function(e){
var disX = e.pageX - $("#box").offset().left
var disY = e.pageY - $("#box").offset().top
// console.log(disX)
------盒子移动位置偏移------
$(document).mousemove(function(e){
var l = e.pageX - disX
var t = e.pageY - disY
console.log($(window).height())
if(l<0){
l = 0
}
if(t<0){
t = 0
}
if(t>$(window).height()-$("#box").height()){
t = $(window).height()-$("#box").height()
}
if(l>$(window).width()-$("#box").width()){
l = $(window).width()-$("#box").width()
}
------计算出盒子拖拽可移动的范围，即系窗口的宽高度-----
$("#box").css({
"background":settings.background,
-----调用默认颜色以外的其他颜色----
"left":l,
"top":t
})
})
$(document).mouseup(function(){
$(document).off("mousemove")
})
-----鼠标点击离开后停止盒子拖拽的移动----
})
})
-----------------------------------------------------------------
插件代码完成后就是插件的调用了：代码如下。
<script>
$(document).ready(function() {
$("#box").dragDiv({
"background":"blue"
})
})
</script> 预加载完成后就可以实现盒子拖拽的移动啦，赶紧来试试吧！！！
效果展示图如下：
--------------谢谢--------------！