别人用jquery写的图片拖拽效果
来源:互联网 发布:warframe重置端口 编辑:程序博客网 时间:2024/05/16 01:55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
/*
作者: 谢泽龙
联系QQ: 454675335 (灬丿Spam丶)
时间: 2014-9-24
www.jq22.com
*/
<script src="jquery-1.11.0.min.js"></script>
<script>
/*
作者: 谢泽龙
联系QQ: 454675335 (灬丿Spam丶)
时间: 2014-9-24
www.jq22.com
*/
$(function() {
function Pointer(x, y) {
this.x = x ;
this.y = y ;
}
function Position(left, top) {
this.left = left ;
this.top = top ;
}
$(".item_content .item").each(function(i) {
this.init = function() { // 初始化
this.box = $(this).parent() ;
$(this).attr("index", i).css({
position : "absolute",
left : this.box.offset().left,
top : this.box.offset().top
}).appendTo(".item_content") ;
this.drag() ;
},
this.move = function(callback) { // 移动
$(this).stop(true).animate({
left : this.box.offset().left,
top : this.box.offset().top
}, 500, function() {
if(callback) {
callback.call(this) ;
}
}) ;
},
this.collisionCheck = function() {
var currentItem = this ;
var direction = null ;
$(this).siblings(".item").each(function() {
if(
currentItem.pointer.x > this.box.offset().left &&
currentItem.pointer.y > this.box.offset().top &&
(currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
(currentItem.pointer.y < this.box.offset().top + this.box.height())
) {
// 返回对象和方向
if(currentItem.box.offset().top < this.box.offset().top) {
direction = "down" ;
} else if(currentItem.box.offset().top > this.box.offset().top) {
direction = "up" ;
} else {
direction = "normal" ;
}
this.swap(currentItem, direction) ;
}
}) ;
},
this.swap = function(currentItem, direction) { // 交换位置
if(this.moveing) return false ;
var directions = {
normal : function() {
var saveBox = this.box ;
this.box = currentItem.box ;
currentItem.box = saveBox ;
this.move() ;
$(this).attr("index", this.box.index()) ;
$(currentItem).attr("index", currentItem.box.index()) ;
},
down : function() {
// 移到上方
var box = this.box ;
var node = this ;
var startIndex = currentItem.box.index() ;
var endIndex = node.box.index(); ;
for(var i = endIndex; i > startIndex ; i--) {
var prevNode = $(".item_content .item[index="+ (i - 1) +"]")[0] ;
node.box = prevNode.box ;
$(node).attr("index", node.box.index()) ;
node.move() ;
node = prevNode ;
}
currentItem.box = box ;
$(currentItem).attr("index", box.index()) ;
},
up : function() {
// 移到上方
var box = this.box ;
var node = this ;
var startIndex = node.box.index() ;
var endIndex = currentItem.box.index(); ;
for(var i = startIndex; i < endIndex; i++) {
var nextNode = $(".item_content .item[index="+ (i + 1) +"]")[0] ;
node.box = nextNode.box ;
$(node).attr("index", node.box.index()) ;
node.move() ;
node = nextNode ;
}
currentItem.box = box ;
$(currentItem).attr("index", box.index()) ;
}
}
directions[direction].call(this) ;
},
this.drag = function() { // 拖拽
var oldPosition = new Position() ;
var oldPointer = new Pointer() ;
var isDrag = false ;
var currentItem = null ;
$(this).mousedown(function(e) {
e.preventDefault() ;
oldPosition.left = $(this).position().left ;
oldPosition.top = $(this).position().top ;
oldPointer.x = e.clientX ;
oldPointer.y = e.clientY ;
isDrag = true ;
currentItem = this ;
}) ;
$(document).mousemove(function(e) {
var currentPointer = new Pointer(e.clientX, e.clientY) ;
if(!isDrag) return false ;
$(currentItem).css({
"opacity" : "0.8",
"z-index" : 999
}) ;
var left = currentPointer.x - oldPointer.x + oldPosition.left ;
var top = currentPointer.y - oldPointer.y + oldPosition.top ;
$(currentItem).css({
left : left,
top : top
}) ;
currentItem.pointer = currentPointer ;
// 开始交换位置
currentItem.collisionCheck() ;
}) ;
$(document).mouseup(function() {
if(!isDrag) return false ;
isDrag = false ;
currentItem.move(function() {
$(this).css({
"opacity" : "1",
"z-index" : 0
}) ;
}) ;
}) ;
}
this.init() ;
}) ;
}) ;
</script>
<style>
.item_content ul {
list-style:none;
}
.item_content ul li {
width:200px;
height:120px;
float:left;
margin:10px
}
.item_content {
width:740px;
height:460px;
border:1px solid #ccc;
float:left;
}
.item_content .item {
width:200px;
height:120px;
line-height:120px;
text-align:center;
cursor:pointer;
background:#ccc;
}
.item_content .item img {
width:200px;
height:120px;
border-radius:6px;
}
</style>
</head>
function Pointer(x, y) {
this.x = x ;
this.y = y ;
}
function Position(left, top) {
this.left = left ;
this.top = top ;
}
$(".item_content .item").each(function(i) {
this.init = function() { // 初始化
this.box = $(this).parent() ;
$(this).attr("index", i).css({
position : "absolute",
left : this.box.offset().left,
top : this.box.offset().top
}).appendTo(".item_content") ;
this.drag() ;
},
this.move = function(callback) { // 移动
$(this).stop(true).animate({
left : this.box.offset().left,
top : this.box.offset().top
}, 500, function() {
if(callback) {
callback.call(this) ;
}
}) ;
},
this.collisionCheck = function() {
var currentItem = this ;
var direction = null ;
$(this).siblings(".item").each(function() {
if(
currentItem.pointer.x > this.box.offset().left &&
currentItem.pointer.y > this.box.offset().top &&
(currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
(currentItem.pointer.y < this.box.offset().top + this.box.height())
) {
// 返回对象和方向
if(currentItem.box.offset().top < this.box.offset().top) {
direction = "down" ;
} else if(currentItem.box.offset().top > this.box.offset().top) {
direction = "up" ;
} else {
direction = "normal" ;
}
this.swap(currentItem, direction) ;
}
}) ;
},
this.swap = function(currentItem, direction) { // 交换位置
if(this.moveing) return false ;
var directions = {
normal : function() {
var saveBox = this.box ;
this.box = currentItem.box ;
currentItem.box = saveBox ;
this.move() ;
$(this).attr("index", this.box.index()) ;
$(currentItem).attr("index", currentItem.box.index()) ;
},
down : function() {
// 移到上方
var box = this.box ;
var node = this ;
var startIndex = currentItem.box.index() ;
var endIndex = node.box.index(); ;
for(var i = endIndex; i > startIndex ; i--) {
var prevNode = $(".item_content .item[index="+ (i - 1) +"]")[0] ;
node.box = prevNode.box ;
$(node).attr("index", node.box.index()) ;
node.move() ;
node = prevNode ;
}
currentItem.box = box ;
$(currentItem).attr("index", box.index()) ;
},
up : function() {
// 移到上方
var box = this.box ;
var node = this ;
var startIndex = node.box.index() ;
var endIndex = currentItem.box.index(); ;
for(var i = startIndex; i < endIndex; i++) {
var nextNode = $(".item_content .item[index="+ (i + 1) +"]")[0] ;
node.box = nextNode.box ;
$(node).attr("index", node.box.index()) ;
node.move() ;
node = nextNode ;
}
currentItem.box = box ;
$(currentItem).attr("index", box.index()) ;
}
}
directions[direction].call(this) ;
},
this.drag = function() { // 拖拽
var oldPosition = new Position() ;
var oldPointer = new Pointer() ;
var isDrag = false ;
var currentItem = null ;
$(this).mousedown(function(e) {
e.preventDefault() ;
oldPosition.left = $(this).position().left ;
oldPosition.top = $(this).position().top ;
oldPointer.x = e.clientX ;
oldPointer.y = e.clientY ;
isDrag = true ;
currentItem = this ;
}) ;
$(document).mousemove(function(e) {
var currentPointer = new Pointer(e.clientX, e.clientY) ;
if(!isDrag) return false ;
$(currentItem).css({
"opacity" : "0.8",
"z-index" : 999
}) ;
var left = currentPointer.x - oldPointer.x + oldPosition.left ;
var top = currentPointer.y - oldPointer.y + oldPosition.top ;
$(currentItem).css({
left : left,
top : top
}) ;
currentItem.pointer = currentPointer ;
// 开始交换位置
currentItem.collisionCheck() ;
}) ;
$(document).mouseup(function() {
if(!isDrag) return false ;
isDrag = false ;
currentItem.move(function() {
$(this).css({
"opacity" : "1",
"z-index" : 0
}) ;
}) ;
}) ;
}
this.init() ;
}) ;
}) ;
</script>
<style>
.item_content ul {
list-style:none;
}
.item_content ul li {
width:200px;
height:120px;
float:left;
margin:10px
}
.item_content {
width:740px;
height:460px;
border:1px solid #ccc;
float:left;
}
.item_content .item {
width:200px;
height:120px;
line-height:120px;
text-align:center;
cursor:pointer;
background:#ccc;
}
.item_content .item img {
width:200px;
height:120px;
border-radius:6px;
}
</style>
</head>
<body>
<div class="item_container">
<div class="item_content">
<ul>
<li>
<div class="item">
<img src="youku.png" />
</div>
</li>
<li>
<div class="item">
<img src="jd.png" />
</div>
</li>
<li>
<div class="item">
<img src="taobao.png" />
</div>
</li>
<li>
<div class="item">
<img src="fenghuan.png" />
</div>
</li>
<li>
<div class="item">
<img src="souhu.png" />
</div>
</li>
<li>
<div class="item">
<img src="wangyi.png" />
</div>
</li>
<li>
<div class="item">
<img src="renren.png" />
</div>
</li>
<li>
<div class="item">
<img src="360.png" />
</div>
</li>
<li>
<div class="item">
<img src="360game.png" />
</div>
</li>
</ul>
</div>
</div>
<!-- <div class="item_container">
<div class="item_content">
<ul>
<li>
<div class="item">
<img src="006.JPG" />
</div>
</li>
<li>
<div class="item">
<img src="007.JPG" />
</div>
</li>
<li>
<div class="item">
<img src="008.JPG" />
</div>
</li>
<li>
<div class="item">
<img src="009.JPG" />
</div>
</li>
</ul>
</div>
</div> -->
<div class="item_content">
<ul>
<li>
<div class="item">
<img src="youku.png" />
</div>
</li>
<li>
<div class="item">
<img src="jd.png" />
</div>
</li>
<li>
<div class="item">
<img src="taobao.png" />
</div>
</li>
<li>
<div class="item">
<img src="fenghuan.png" />
</div>
</li>
<li>
<div class="item">
<img src="souhu.png" />
</div>
</li>
<li>
<div class="item">
<img src="wangyi.png" />
</div>
</li>
<li>
<div class="item">
<img src="renren.png" />
</div>
</li>
<li>
<div class="item">
<img src="360.png" />
</div>
</li>
<li>
<div class="item">
<img src="360game.png" />
</div>
</li>
</ul>
</div>
</div>
<!-- <div class="item_container">
<div class="item_content">
<ul>
<li>
<div class="item">
<img src="006.JPG" />
</div>
</li>
<li>
<div class="item">
<img src="007.JPG" />
</div>
</li>
<li>
<div class="item">
<img src="008.JPG" />
</div>
</li>
<li>
<div class="item">
<img src="009.JPG" />
</div>
</li>
</ul>
</div>
</div> -->
</body>
</html>
</html>
0 0
- 别人用jquery写的图片拖拽效果
- jQuery写的一个拖拽效果
- android实现图片拖拽效果(参考了一下别人的代码)
- jquery资料 参照别人的效果
- jquery 预览图片的效果
- Jquery 插件的图片效果
- 用jquery写一个简单的广告动画效果
- 用jquery实现拖拽的效果
- 用纯CSS写的图片切换,翻页效果..
- 使用jQuery 写的一些小效果
- 别人写的双链表
- 别人写的
- 自己写的”图片轮换效果“代码
- 用jquery做的图片切换效果()
- 用JQuery模仿淘宝的图片显示效果
- 分别用javascript,jquery实现 对图片的放大镜效果
- 一个简单的图片拖拽排序效果 ----- JQUERY特效模板
- jQuery的图片放大镜效果插件 - elevateZoom
- 线程池的大小应该设为多少
- 设计模式-创建型-抽象工厂模式(Abstract Factory)
- 【Git/Github学习笔记】Git常用命令(代码冲突二)
- PAT-A 1027. Colors in Mars
- 糗事百科简易版(网页提交数据通过服务器处理显示到手机上)
- 别人用jquery写的图片拖拽效果
- FreeMarker导出word
- enq:TM-contention
- 拓展编辑器功能--Unity自定义编辑器窗口
- PAT-A 1029. Median
- Android ListView框架搭建:抽取Adapter共性的方法与属性进行封装
- 蜀山战纪
- 海报 定制 图片
- 濮阳租房