<!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>
<title>jQuery购物商品拖放效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body
{
font: 12px Verdana,Arial, "宋体" ,sans-serif;
}
h1
{
font-size: 18px;
font-family: 微软雅黑;
font-weight: normal;
}
h2
{
clear: both;
font-size: 16px;
margin: 0;
padding: 5px;
border-bottom: 1px solid #69c;
color: #1a1;
font-family: 微软雅黑;
font-weight: normal;
}
h3
{
margin: 0;
font-size: 14px;
font-family: 微软雅黑;
font-weight: normal;
}
p
{
clear: both;
}
.author
{
position: fixed;
_position: absolute;
right: 20px;
top: 20px;
}
ul
{
clear: both;
float: left;
}
/*格子拖放*/
.grid li
{
float: left;
list-style: none;
width: 32px;
height: 32px;
border: 1px solid #ccc;
background: #eee;
margin: 5px;
padding: 1px;
-moz-user-select: none;
}
.grid img
{
width: 32px;
height: 32px;
}
.grid div
{
position: relative;
}
.grid span
{
position: absolute;
right: 1px;
top: 1px;
color: #fff;
}
/*交换数据用的DIV*/
#tempBox
{
position: absolute;
z-index: 9999;
}
/*单个拖放demo*/
#test
{
clear: both;
width: 500px;
margin: 30px;
padding: 10px;
line-height: 24px;
background: #ccc;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
说明：直接运行代码查看效果的时候会出现如下两个问题，没有关系，实际应用中，把代码放到网页中直接运行时，不会出现错误。<br>
1、运行代码后会请先刷新一下，然后就可以看到效果了。<br>
2、浏览器左下角会提示脚本错误。<br>
<br>
类似物品栏里的物品可相互拖拽，而且可以有限制拖放，如：下面格子里的东西可以拖到上面，但是不能拖到下面的其他格子里，上面格子里的东西可以在上下格子里任意拖放。<br>
<h2>
Drop Container</h2>
<ul class="drop grid">
<li id="1"></li>
<li id="1"></li>
<li id="1"></li>
<li id="1"></li>
<li id="1"></li>
</ul>
<h2>
Drags</h2>
<ul class="drag grid">
<li id="l1">
<div>
<img src="images/img-1198795645853.jpg" alt="" title="" /><span>2</span></div>
</li>
<li id="l2">
<div>
<img src="images/img-1198795645855.jpg" alt="" title="" /><span>23</span></div>
</li>
<li id="l3">
<div>
<img src="images/img-1198795645857.jpg" alt="" title="" /><span>1</span></div>
</li>
<li id="l4">
<div>
<img src="images/img-1198795645861.jpg" alt="" title="" /><span>13</span></div>
</li>
<li id="l5">
<div>
<img src="images/img-1198795645862.jpg" alt="" title="" /><span>13</span></div>
</li>
<li id="l1">
<div>
<img src="images/img-1198795645864.jpg" alt="" title="" /><span>2</span></div>
</li>
<li id="l2">
<div>
<img src="images/img-1198795645866.jpg" alt="" title="" /><span>23</span></div>
</li>
<li id="l3">
<div>
<img src="images/img-1198795645868.jpg" alt="" title="" /><span>1</span></div>
</li>
<li id="l4">
<div>
<img src="images/img-1198795645869.jpg" alt="" title="" /><span>13</span></div>
</li>
</ul>
<script type="text/javascript">
<!--
//拖放插件DragDrop，作者：kele527，整理：源码爱好者（Codefans.NET）
//类似物品栏里的物品可相互拖拽，而且可以有限制拖放，如：下面格子里的东西可以拖到上面，但是不能拖到下面的其他格子里，上面格子里的东西可以在上下格子里任意拖放
$.fn.Drag = function (options) {
var defaults = {
limit: window, //是否限制拖放范围，默认限制当前窗口内
drop: false, //是否drop
handle: false, //拖动手柄
finish: function () { } //回调函数
};
var options = $.extend(defaults, options);
this.X = 0; //初始位置
this.Y = 0;
this.dx = 0; //位置差值
this.dy = 0;
var This = this;
var ThisO = $(this); //被拖目标
var thatO;
if (options.drop) {
var ThatO = $(options.drop); //可放下位置
ThisO.find('div').css({ cursor: 'move' });
var tempBox = $('<div id="tempBox" class="grid"></div>');
} else {
options.handle ? ThisO.find(options.handle).css({ cursor: 'move', '-moz-user-select': 'none' }) : ThisO.css({ cursor: 'move', '-moz-user-select': 'none' });
}
//拖动开始
this.dragStart = function (e) {
var cX = e.pageX;
var cY = e.pageY;
if (options.drop) {
ThisO = $(this);
if (ThisO.find('div').length != 1) { return } //如果没有拖动对象就返回
This.X = ThisO.find('div').offset().left;
This.Y = ThisO.find('div').offset().top;
tempBox.html(ThisO.html());
ThisO.html('');
$('body').append(tempBox);
tempBox.css({ left: This.X, top: This.Y });
} else {
This.X = ThisO.offset().left;
This.Y = ThisO.offset().top;
ThisO.css({ margin: 0 })
}
This.dx = cX - This.X;
This.dy = cY - This.Y;
if (!options.drop) { ThisO.css({ position: 'absolute', left: This.X, top: This.Y }) }
$(document).mousemove(This.dragMove);
$(document).mouseup(This.dragStop);
if ($.browser.msie) { ThisO[0].setCapture(); } //IE,鼠标移到窗口外面也能释放
}
//拖动中
this.dragMove = function (e) {
var cX = e.pageX;
var cY = e.pageY;
if (options.limit) {//限制拖动范围
//容器的尺寸
var L = $(options.limit)[0].offsetLeft ? $(options.limit).offset().left : 0;
var T = $(options.limit)[0].offsetTop ? $(options.limit).offset().top : 0;
var R = L + $(options.limit).width();
var B = T + $(options.limit).height();
//获取拖动范围
var iLeft = cX - This.dx, iTop = cY - This.dy;
//获取超出长度
var iRight = iLeft + parseInt(ThisO.innerWidth()) - R, iBottom = iTop + parseInt(ThisO.innerHeight()) - B;
//alert($(window).height())
//先设置右下，再设置左上
if (iRight > 0) iLeft -= iRight;
if (iBottom > 0) iTop -= iBottom;
if (L
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动
5星 · 超过95%的资源 需积分: 50 197 浏览量
2013-06-20
16:20:51
上传
评论
收藏 40KB RAR 举报 
jQuery物品拖放效果.rar （11个子文件） 
jQuery物品拖放效果 
index.html 12KB images 
img-1198795645866.jpg 2KB img-1198795645864.jpg 2KB img-1198795645869.jpg 2KB img-1198795645868.jpg 2KB img-1198795645862.jpg 2KB img-1198795645853.jpg 2KB img-1198795645855.jpg 2KB img-1198795645861.jpg 2KB img-1198795645857.jpg 2KB
jquery.min.js 56KB资源评论
肉山2021-07-15不是我要的效果
划勒个水2016-07-18不过不是我要的效果，不过可以作为参考
jlcanoe2013-12-03还可以，能用，谢谢- xiaoqiutong2017-03-31可以作为参考，可以用
fquiong
- 粉丝: 1
- 资源: 4
