<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="utf-8"></script>
<title>jsmartdrag实例页面</title>
<style type="text/css">
#ul{
width: 330px;
height: 340px;
position: relative;
list-style: none;
padding: 0
}
li{
float: left;
width: 100px;
height: 100px;
margin:10px 10px 0 0;
background: red;
text-align: center;
list-style: none;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 100px;
-webkit-user-select:none;
-moz-user-select: none;
user-select: none;
-khtml-user-select: none;
}
li:nth-child(2){
background: blue;
}li:nth-child(3){
background: black;
}li:nth-child(4){
background: yellow;
color: #000;
}li:nth-child(5){
background: green;
}
li:nth-child(6){
background: gray;
}
.down_class{
opacity: .7;
position: absolute;
cursor:move;
}
.a{
visibility: hidden;
}
</style>
</head>
<body>
<ul id="ul">
<li>
我是1号
</li>
<li>
我是2号
</li>
<li>
我是3号
</li>
<li>
我是4号
</li>
<li>
我是5号
</li>
<li>
我是6号
</li>
<li>
我是7号
</li>
<!-- <li class="a">2344</li> -->
</ul>
<script type="text/javascript">
var drag = function(opt) {
this.options = $.extend({
fdom : "#ul",
margin:10,
callback:$.noop()
},opt || {})
this.init();
}
drag.prototype = {
init :function(e){
this.dragdown = false;
this.fdom = $(this.options.fdom);
this.dom = this.fdom.find("li");
this.dw = this.dom.width()/2;
this.dh = this.dom.height()/2;
this.mr = this.options.margin;
this.l = this.dom.length;
this.index;
this.pageY;
this.pageX;
this.X = 0;
this.Y = 0;
this.larry = [];
this.minX = this.fdom.offset().left;
this.minY = this.fdom.offset().top;
this.maxX = this.fdom.width() - this.dw*2;
this.maxY = this.fdom.height() - this.dh*2;
this.farry = [this.minX,this.minY,this.maxX,this.maxY];
this.domdiff();
this.mousedown();
},
domdiff:function(e){
var self = this;
self.dom.each(function(i){
this.minX = $(this).offset().left;
this.minY = $(this).offset().top;
this.maxX = $(this).offset().left + self.dw*2;
this.maxY = $(this).offset().top + self.dh*2;
self.larry[i] = {
left : this.minX ,
top : this.minY ,
mleft:this.maxX,
mtop:this.maxY
}
})
},
mousedown:function(e){
var self = this;
self.dom.mousedown(function(){
self.dragdown = true;
var e = event || window.event;
var pageX = e.pageX || e.clientX;
var pageY = e.pageY || e.clientY;
self.X = pageX - self.farry[0]-self.dw;
self.Y = pageY - self.farry[1]-self.dh;
$(this).addClass("down_class").css({
left:self.X,
top:self.Y
});
self.mousemove($(this));
});
},
mousemove:function(dom){
var self = this;
dom.mousemove(function(){
var e = event || window.event;
self.pageX = e.pageX || e.clientX;
self.pageY = e.pageY || e.clientY;
if(self.dragdown){
self.mouseleave(dom);
self.X = self.pageX - self.farry[0] - self.dw;
self.Y = self.pageY - self.farry[1] - self.dh;
if(e.clientX - self.dw< self.farry[0])
{
self.X= 0;
}
if(e.clientX - self.dw > self.farry[2])
{
self.X= self.farry[2]- self.mr;
}
if(e.clientY - self.dh< self.farry[1])
{
self.Y= 0
}
if(e.clientY - self.dh> self.farry[3])
{
self.Y= self.farry[3] - self.mr
}
$(this).css({
left:self.X,
top:self.Y
});
self.mouseup($(this));
}
});
},
mouseleave:function(dom){
dom.mouseleave(function(e){
$(this).mouseup();
})
},
mouseup:function(dom){
var self = this;
dom.mouseup(function(e){
var dindex =$(this).index();
var $dom = $(this);
if(self.dragdown){
setTimeout(function(){
$dom.removeClass("down_class");
for(var i = 0; i<self.l;i++){
if(self.pageX < self.larry[i]["mleft"] && self.pageX > self.larry[i]["left"] && self.pageY < self.larry[i]["mtop"] && self.pageY > self.larry[i]["top"]){
self.index = i;
break;
}else{
self.index = self.dom.length -1;
}
}
if(dindex == 0 && self.index == 0){
$dom.insertBefore(self.options.fdom+" "+"li:eq("+ self.index + 1 +")");
}else{
if(dindex >= self.index ){
$dom.insertBefore(self.options.fdom+" "+"li:eq("+ self.index +")");
}else{
$dom.insertAfter(self.options.fdom+" "+"li:eq("+ self.index +")");
}
}
if(self.options.callback && self.options.callback()){
self.options.callback();
}
},10)
self.dragdown = false;
}
});
}
}
window.drag = drag;
$(function(){
var a = new drag({
});
})
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="utf-8"></script>
<title>jsmartdrag实例页面</title>
<style type="text/css">
#ul{
width: 330px;
height: 340px;
position: relative;
list-style: none;
padding: 0
}
li{
float: left;
width: 100px;
height: 100px;
margin:10px 10px 0 0;
background: red;
text-align: center;
list-style: none;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 100px;
-webkit-user-select:none;
-moz-user-select: none;
user-select: none;
-khtml-user-select: none;
}
li:nth-child(2){
background: blue;
}li:nth-child(3){
background: black;
}li:nth-child(4){
background: yellow;
color: #000;
}li:nth-child(5){
background: green;
}
li:nth-child(6){
background: gray;
}
.down_class{
opacity: .7;
position: absolute;
cursor:move;
}
.a{
visibility: hidden;
}
</style>
</head>
<body>
<ul id="ul">
<li>
我是1号
</li>
<li>
我是2号
</li>
<li>
我是3号
</li>
<li>
我是4号
</li>
<li>
我是5号
</li>
<li>
我是6号
</li>
<li>
我是7号
</li>
<!-- <li class="a">2344</li> -->
</ul>
<script type="text/javascript">
var drag = function(opt) {
this.options = $.extend({
fdom : "#ul",
margin:10,
callback:$.noop()
},opt || {})
this.init();
}
drag.prototype = {
init :function(e){
this.dragdown = false;
this.fdom = $(this.options.fdom);
this.dom = this.fdom.find("li");
this.dw = this.dom.width()/2;
this.dh = this.dom.height()/2;
this.mr = this.options.margin;
this.l = this.dom.length;
this.index;
this.pageY;
this.pageX;
this.X = 0;
this.Y = 0;
this.larry = [];
this.minX = this.fdom.offset().left;
this.minY = this.fdom.offset().top;
this.maxX = this.fdom.width() - this.dw*2;
this.maxY = this.fdom.height() - this.dh*2;
this.farry = [this.minX,this.minY,this.maxX,this.maxY];
this.domdiff();
this.mousedown();
},
domdiff:function(e){
var self = this;
self.dom.each(function(i){
this.minX = $(this).offset().left;
this.minY = $(this).offset().top;
this.maxX = $(this).offset().left + self.dw*2;
this.maxY = $(this).offset().top + self.dh*2;
self.larry[i] = {
left : this.minX ,
top : this.minY ,
mleft:this.maxX,
mtop:this.maxY
}
})
},
mousedown:function(e){
var self = this;
self.dom.mousedown(function(){
self.dragdown = true;
var e = event || window.event;
var pageX = e.pageX || e.clientX;
var pageY = e.pageY || e.clientY;
self.X = pageX - self.farry[0]-self.dw;
self.Y = pageY - self.farry[1]-self.dh;
$(this).addClass("down_class").css({
left:self.X,
top:self.Y
});
self.mousemove($(this));
});
},
mousemove:function(dom){
var self = this;
dom.mousemove(function(){
var e = event || window.event;
self.pageX = e.pageX || e.clientX;
self.pageY = e.pageY || e.clientY;
if(self.dragdown){
self.mouseleave(dom);
self.X = self.pageX - self.farry[0] - self.dw;
self.Y = self.pageY - self.farry[1] - self.dh;
if(e.clientX - self.dw< self.farry[0])
{
self.X= 0;
}
if(e.clientX - self.dw > self.farry[2])
{
self.X= self.farry[2]- self.mr;
}
if(e.clientY - self.dh< self.farry[1])
{
self.Y= 0
}
if(e.clientY - self.dh> self.farry[3])
{
self.Y= self.farry[3] - self.mr
}
$(this).css({
left:self.X,
top:self.Y
});
self.mouseup($(this));
}
});
},
mouseleave:function(dom){
dom.mouseleave(function(e){
$(this).mouseup();
})
},
mouseup:function(dom){
var self = this;
dom.mouseup(function(e){
var dindex =$(this).index();
var $dom = $(this);
if(self.dragdown){
setTimeout(function(){
$dom.removeClass("down_class");
for(var i = 0; i<self.l;i++){
if(self.pageX < self.larry[i]["mleft"] && self.pageX > self.larry[i]["left"] && self.pageY < self.larry[i]["mtop"] && self.pageY > self.larry[i]["top"]){
self.index = i;
break;
}else{
self.index = self.dom.length -1;
}
}
if(dindex == 0 && self.index == 0){
$dom.insertBefore(self.options.fdom+" "+"li:eq("+ self.index + 1 +")");
}else{
if(dindex >= self.index ){
$dom.insertBefore(self.options.fdom+" "+"li:eq("+ self.index +")");
}else{
$dom.insertAfter(self.options.fdom+" "+"li:eq("+ self.index +")");
}
}
if(self.options.callback && self.options.callback()){
self.options.callback();
}
},10)
self.dragdown = false;
}
});
}
}
window.drag = drag;
$(function(){
var a = new drag({
});
})
</script>
</body>
</html>