jquery图片拖拽排序特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片拖拽排序特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="js/kit.js"></script>
		<!--[if IE]>
		<script src="js/ieFix.js"></script>
		<![endif]-->
		<script src="js/event.js"></script>
		<script src="js/dom.js"></script>
		<link rel="stylesheet" href="css/css.css" />
		<link rel="stylesheet" href="demo.css" />
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-30210234-1']);
			_gaq.push(['_trackPageview']);
			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();

		</script>
		<script src="js/dom.js"></script>
		<script src="js/event.js"></script>
		<link rel="stylesheet" href="css/css.css" />
		<link rel="stylesheet" href="demo.css" />
	</head>
	<body>
		<h1>jquery图片拖拽排序</h1>
		<ul>
			<li class="dragDraoDemoLi">
				<h3>拼图游戏</h3>
				<div class="puzzle">
					<ul>
						<li class="l1"></li>
						<li class="l2"></li>
						<li class="l3"></li>
						<li class="l4"></li>
						<li class="l5"></li>
						<li class="l6"></li>
						<li class="l7"></li>
						<li class="l8"></li>
						<li class="l9"></li>
					</ul>
				</div>
			</li>
		</ul>
		<script>
			$kit.$(function() {
				$kit.event.ev({
					el : $kit.el('li', $kit.el('.puzzle')[0]),
					ev : 'drag',
					fn : function(e) {
						//必须给可以drag的元素绑定任意dragXXXX系列事件，这样才会触发kitjs的drag初始化事件，才能拖拽
						//你可以绑定一个空fn
					}
				});
				$kit.event.ev({
					el : $kit.el('li', $kit.el('.puzzle')[0]),
					ev : 'drop',
					fn : function(e) {
						var originPosNextEl = $kit.nextEl(e.dragElement, function(el) {
							if(el.tagName && el.tagName.toLowerCase() == 'li') {
								return true;
							}
						});
						var a = $kit.el('li', $kit.el('.puzzle')[0]);
						$kit.dom.switchPos(e.currentTarget, e.dragElement);
					}
				});
			});
		</script>
	</body>
</html>

JS代码(dom.js):

/** * Dom扩展 * @class $Kit.Dom * @requires kit.js * @see <a href="https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/dom.js">Source code</a> */
$Kit.Dom = function(){
	//}
$kit.merge($Kit.Dom.prototype,/** * @lends $Kit.Dom.prototype */
{
	/** * 根据tagName查找父元素 * @param{
	Element}
* @param{
	String}
* @param{
	Element}
[topEl] 到topEl停止查找 * @return{
	Element|Null}
*/
parentEl8tag:function(el,tagName,topEl){
	var topEl = topEl || document.body;
	return $kit.parentEl(el,function(p){
	if(p.tagName && p.tagName.toLowerCase() == tagName.toLowerCase()){
	return true;
}
if(p == topEl){
	return false;
}
}
,topEl);
}
,/** * 根据className查找父元素 * @param{
	Element}
* @param{
	String}
* @param{
	Element}
[topEl] 到topEl停止查找 * @return{
	Element|Null}
*/
parentEl8cls:function(el,cls,topEl){
	var topEl = topEl || document.body;
	return $kit.parentEl(el,function(p){
	if($kit.hsCls(p,cls)){
	return true;
}
if(p == topEl){
	return false;
}
}
,topEl);
}
,/** * 注入script块 * @param{
	Object}
config * @param{
	String}
config.id 注入script的id，自定义，只要与现有dom里面的元素id不相同即可 * @param{
	String}
[config.url] 注入script的加载url * @param{
	String}
[config.text] 注入script的script内容 * @param{
	String}
[config.then] 注入script的加载完毕的回调方法 * @param{
	String}
[config.scope] 注入script的回调方法的this指针 * @return{
	Element}
script */
injectJs:function(){
	if(arguments.length == 1){
	var config = arguments[0];
	if(config.id && $kit.el8id(config.id)){
	return;
}
config.id = config.id || $kit.onlyId();
	var where = config.where || window.document.body;
	var script = document.createElement('script');
	$kit.attr(script,'type','text/javascript');
	if(config.id){
	$kit.attr(script,'id',config.id);
}
if(!$kit.isEmpty(config.url)){
	script.src = config.url;
	if(!$kit.isEmpty(config.then)){
	var scope = config.scope || window;
	script.onload = function(){
	config.then.call(scope,script);
}
}
}
else if(!$kit.isEmpty(config.text)){
	script.innerHTML = config.text;
	if(!$kit.isEmpty(config.then)){
	setTimeout(function(){
	config.then.call(scope,script);
}
,0);
}
}
where.appendChild(script);
	return script;
}
}
,/** * 注入css * @param{
	Object}
config * @param{
	String}
config.id 注入css的id，自定义，只要与现有dom里面的元素id不相同即可 * @param{
	String}
[config.url] 注入css的url * @param{
	String}
[config.text] 如果没有url的话，写入style的文本 * @return{
	Element}
css */
injectCss:function(){
	if(arguments.length == 1){
	var config = arguments[0];
	if(config.id && $kit.el8id(config.id)){
	return;
}
// Takes a string of css,inserts it into a `<style>`,then injects it in at the very top of the `<head>`. This ensures any user-defined styles will take precedence.var where = config.where || document.getElementsByTagName('head')[document.getElementsByTagName('head').length - 1];
	var css;
	if(!$kit.isEmpty(config.url)){
	css = document.createElement('link');
	config.id && $kit.attr(css,'id',config.id);
	$kit.attr(css,{
	rel:'stylesheet',href:config.url}
);
}
else if(!$kit.isEmpty(config.text)){
	css = document.createElement('style');
	config.id && $kit.attr(css,'id',config.id);
	$kit.attr(css,'type','text/css');
	css.innerHTML = config.text;
}
if(css){
	$kit.insEl({
	pos:'last',what:css,where:where}
);
}
return css;
}
}
,/** * 删除所有样式 * @param{
	String}
* @param{
	Element}
*/
rmClsAll:function(cls,top){
	var a = $kit.el8cls(cls,top);
	while(a){
	$kit.rmCls(a,cls);
	a = $kit.el8cls(cls,top);
}
}
,/** * 通过className前缀取className * @param{
	Element}
* @param{
	String}
* @return{
	NodeList||Null}
*/
getClassNameByPrefix:function(el,prefixCls){
	var clsAry = el.className.split(/\s+/);
	var re = null;
	if(clsAry && clsAry.length){
	$kit.each(clsAry,function(o){
	if(o.indexOf(prefixCls) == 0){
	re = o;
	return false;
}
}
);
}
return re;
}
,/** * innerText * @param{
	Element}
* @param{
	String}
[text] * @return{
	String|Null}
*/
text:function(el,text){
	if(el != null && 'innerText' in el){
	if(text){
	el.innerText = text;
}
else{
	return el.innerText;
}
}
else{
	if(text){
	el.textContent = text;
}
else{
	return el.textContent;
}
}
}
,/** * innerHTML * @param{
	Element}
* @param{
	String}
[html] * @return{
	String|Null}
*/
html:function(el,html){
	if(html){
	if(el != null && 'innerHTML' in el){
	el.innerHTML = html;
}
}
else{
	return el.innerHTML;
}
}
,/** * clone a node * @param{
	Element}
* @return{
	Element}
*/
clone:function(node){
	if(document.createElement("nav").cloneNode(true).outerHTML !== "<:nav></:nav>"){
	return node.cloneNode(true);
}
else{
	var fragment = document.createDocumentFragment(),//doc = fragment.createElement ? fragment:document;
	doc.createElement(node.tagName);
	var div = doc.createElement('div');
	fragment.appendChild(div);
	div.innerHTML = node.outerHTML;
	return div.firstChild;
}
}
,/** * height * @param{
	Element}
* @param{
	Number}
[value] * @return{
	Number|Null}
*/
height:function(node,value){
	var me = this;
	if(node != null){
	if(value == null){
	return $kit.offset(node).height;
}
if(document.compatMode == "BackCompat"){
	node.style.height = value;
}
else{
	node.style.height = value//- ($kit.css(node,'border-top-width') || 0)//- ($kit.css(node,'border-bottom-width') || 0)//- ($kit.css(node,'padding-top-width') || 0)//- ($kit.css(node,'padding-bottom-width') || 0)//;
}
}
return $kit.viewport().clientHeight;
}
,/** * width * @param{
	Element}
* @param{
	Number}
[value] * @return{
	Number|Null}
*/
width:function(node,value){
	var me = this;
	if(node != null){
	if(value == null){
	return $kit.offset(node).width;
}
if(document.compatMode == "BackCompat"){
	node.style.width = value;
}
else{
	node.style.width = value//- ($kit.css(node,'border-left-width') || 0)//- ($kit.css(node,'border-right-width') || 0)//- ($kit.css(node,'padding-left-width') || 0)//- ($kit.css(node,'padding-right-width') || 0)//;
}
}
return $kit.viewport().clientHeight;
}
,/** * height + padding * @param{
	Element}
* @return{
	Number}
*/
innerHeight:function(node){
	var me = this;
	if(document.compatMode == "BackCompat"){
	return $kit.css(node,'height') - ($kit.css(node,'border-top-width') || 0) - ($kit.css(node,'border-bottom-width') || 0);
}
return $kit.css(node,'height') + ($kit.css(node,'padding-top-width') || 0) - ($kit.css(node,'padding-bottom-width') || 0);
}
,/** * width + padding * @param{
	Element}
* @return{
	Number}
*/
innerWidth:function(node){
	var me = this;
	if(document.compatMode == "BackCompat"){
	return $kit.css(node,'width') - ($kit.css(node,'border-left-width') || 0) - ($kit.css(node,'border-right-width') || 0);
}
return $kit.css(node,'width') + ($kit.css(node,'padding-left-width') || 0) - ($kit.css(node,'padding-right-width') || 0);
}
,/** * height + padding + border * @param{
	Element}
* @return{
	Number}
*/
outerHeight:function(node){
	var me = this;
	if(document.compatMode == "BackCompat"){
	return $kit.css(node,'height');
}
return $kit.css(node,'height') + ($kit.css(node,'padding-top-width') || 0) - ($kit.css(node,'padding-bottom-width') || 0)//+ ($kit.css(node,'border-top-width') || 0) + ($kit.css(node,'border-bottom-width') || 0);
}
,/** * width + padding + border * @param{
	Element}
* @return{
	Number}
*/
outerWidth:function(node){
	var me = this;
	if(document.compatMode == "BackCompat"){
	return $kit.css(node,'width');
}
return $kit.css(node,'width') + ($kit.css(node,'padding-left-width') || 0) - ($kit.css(node,'padding-right-width') || 0)//+ ($kit.css(node,'border-left-width') || 0) + ($kit.css(node,'border-right-width') || 0);
}
,/** * 包围一个html * @param{
	Element}
* @param{
	String}
*/
wrap:function(node,html){
	if($kit.isNode(html)){
	//}
else if($kit.isStr(html)){
	html = $kit.newHTML(html).childNodes[0];
}
else{
	return;
}
$kit.insEl({
	where:node,what:html,pos:'before'}
);
	html.appendChild(node);
	return html;
}
,/** * 序列化form元素 * @param{
	Element}
* @param{
	String}
* @return{
	String}
*/
serialize:function(form){
	if($kit.isNode(form)){
	if(form.tagName.toLowerCase() == 'form'){
	var formEls ={
}
;
	$kit.each($kit.el('input',form),function(o){
	if(o.type && o.type.toString.toLowerCase() == 'text'){
	formEls[o.name] = o.value;
}
else if(o.type && o.type.toString().toLowerCase() == 'radio'){
	if(o.checked){
	formEls[o.name] = o.value;
}
}
else if(o.type && o.type.toString().toLowerCase() == 'checkbox'){
	if(o.checked){
	if(!$kit.isAry(formEls[o.name])){
	formEls[o.name] = [formEls[o.name]];
}
formEls[o.name].push(o.value);
}
}
}
);
	$kit.each($kit.el('textarea',form),function(o){
	formEls[o.name] = o.value;
}
);
	$kit.each($kit.el('select',form),function(o){
	formEls[o.name] = o.options[o.selectedIndex].value;
}
);
	var re = [];
	for(var key in formEls){
	if($kit.isAry(formEls[key])){
	re.push(key + '=' + encodeURIComponent(formEls[key].join(',')));
}
else{
	re.push(key + '=' + encodeURIComponent(formEls[key]));
}
}
return re.join('');
}
return form.name + '=' + encodeURIComponent($kit.val(form));
}
}
,/** * 计算元素相对于他的offsetParent的偏移 * @param{
	Element}
* @return{
	Number}
top 距离顶部 * @return{
	Number}
left 距离左边 * @return{
	Number}
height 高度 * @return{
	Number}
width 宽度 * @return{
	Number}
bottom 底部距离顶部 * @return{
	Number}
right 右边距离最左边 * @return{
	Number}
middleTop 中间距离顶部 * @return{
	Number}
middleLeft 中间距离最左边 */
position:function(el){
	var me = this;
	if($kit.isEmpty(el)){
	return;
}
var top = el.offsetTop,//left = el.offsetLeft,//width = el.offsetWidth,//height = el.offsetHeight;
	return{
	top:top,left:left,width:width,height:height,bottom:top + height,right:left + width,middleTop:top + height / 2,middleLeft:left + width / 2}
}
,/** * 计算元素相对于他的可视区的偏移 * @param{
	Element}
* @return{
	Number}
top 距离顶部 * @return{
	Number}
left 距离左边 * @return{
	Number}
height 高度 * @return{
	Number}
width 宽度 * @return{
	Number}
bottom 底部距离顶部 * @return{
	Number}
right 右边距离最左边 * @return{
	Number}
middleTop 中间距离顶部 * @return{
	Number}
middleLeft 中间距离最左边 */
clientOffset:function(el){
	var me = this;
	if($kit.isEmpty(el)){
	return;
}
var offset = $kit.offset(el);
	var viewport = $kit.viewport();
	return{
	top:offset.top - viewport.scrollTop,left:offset.left - viewport.scrollLeft,width:offset.width,height:offset.height,bottom:offset.bottom - viewport.scrollTop,right:offset.right - viewport.scrollLeft,middleTop:offset.top - viewport.scrollTop + offset.height / 2,middleLeft:offset.left - viewport.scrollLeft + offset.width / 2}
}
,/** * 获取当一个元素居中的时候，他相对于doc绝对值的top,bottom,left,right等等 * @param{
	Element}
* @return{
	Number}
top 距离顶部 * @return{
	Number}
left 距离左边 * @return{
	Number}
height 高度 * @return{
	Number}
width 宽度 * @return{
	Number}
bottom 底部距离顶部 * @return{
	Number}
right 右边距离最左边 * @return{
	Number}
middleTop 中间距离顶部 * @return{
	Number}
middleLeft 中间距离最左边 */
offsetCenter:function(el){
	var me = this;
	var viewport = $kit.viewport();
	var offset = $kit.offset(el);
	return{
	top:viewport.clientHeight / 2 + viewport.scrollTop - offset.height / 2,left:viewport.clientWidth / 2 + viewport.scrollLeft - offset.width / 2,right:viewport.clientWidth / 2 + viewport.scrollLeft + offset.width / 2,bottom:viewport.clientHeight / 2 + viewport.scrollTop + offset.height / 2,middleTop:viewport.clientHeight / 2 + viewport.scrollTop,middleLeft:viewport.clientWidth / 2 + viewport.scrollLeft}
}
,/** * 获取当一个元素居中的时候，他相对于可视区域的top,bottom,left,right等等 * @param{
	Element}
* @return{
	Number}
top 距离顶部 * @return{
	Number}
left 距离左边 * @return{
	Number}
height 高度 * @return{
	Number}
width 宽度 * @return{
	Number}
bottom 底部距离顶部 * @return{
	Number}
right 右边距离最左边 * @return{
	Number}
middleTop 中间距离顶部 * @return{
	Number}
middleLeft 中间距离最左边 */
clientOffsetCenter:function(el){
	var me = this;
	var viewport = $kit.viewport();
	var offset = $kit.offset(el);
	return{
	top:(viewport.clientHeight / 2 - offset.height / 2),left:(viewport.clientWidth / 2 - offset.width / 2),right:(viewport.clientWidth / 2 + offset.width / 2),bottom:(viewport.clientHeight / 2 + offset.height / 2),middleTop:(viewport.clientHeight / 2),middleLeft:(viewport.clientWidth / 2)}
}
,/** * 获取当一个元素居中的时候，他相对于可视区域的top,bottom,left,right等等 * @param{
	Element}
* @return{
	Number}
top 距离顶部 * @return{
	Number}
left 距离左边 * @return{
	Number}
height 高度 * @return{
	Number}
width 宽度 * @return{
	Number}
bottom 底部距离顶部 * @return{
	Number}
right 右边距离最左边 * @return{
	Number}
middleTop 中间距离顶部 * @return{
	Number}
middleLeft 中间距离最左边 */
clientPos:function(el){
	var me = this;
	var viewport = $kit.viewport();
	var offset = $kit.offset(el);
	return{
	top:viewport.clientHeight / 2 + viewport.scrollTop - offset.height / 2,left:viewport.clientWidth / 2 + viewport.scrollLeft - offset.width / 2,right:viewport.clientWidth / 2 + viewport.scrollLeft + offset.width / 2,bottom:viewport.clientHeight / 2 + viewport.scrollTop + offset.height / 2,middleTop:viewport.clientHeight / 2 + viewport.scrollTop,middleLeft:viewport.clientWidth / 2 + viewport.scrollLeft}
}
,/** * 交换两个element的位置 */
switchPos:function(origin,target){
	var targetPos;
	if(target.previousSibling){
	targetPos ={
	pos:'after',where:target.previousSibling}
}
else{
	targetPos ={
	pos:'first',where:target.parentNode}
}
$kit.insEl({
	pos:'after',where:origin,what:target}
);
	$kit.insEl($kit.merge({
	what:origin}
,targetPos));
}
}
);
	/** * $Kit.Dom的实例，直接通过这个实例访问$Kit.Dom所有方法 * @global * @name $kit.dom * @alias $kit.d * @type $Kit.Dom */
$kit.dom = $kit.d = new $Kit.Dom();

JS代码(event.js):

/** * 事件扩展，加载该js之后，$kit.ev事件既可以支持全浏览器拖拽 * @class $Kit.Event * @requires kit.js * @requires dom.js * @see <a href="https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/event.js">Source code</a> */
$Kit.Event = function(){
	///** * 原始的ev事件 * @member _ev * @instance * @memberOf $Kit.Event */
this._ev = function(){
	$Kit.prototype.ev.apply($kit,arguments);
}
/** * 当前拖拽事件的拖拽元素 * @member dragElement * @instance * @memberOf $Kit.Event */
this.dragElement = undefined;
	/*$kit.ev = function(){
	$kit.event.ev.apply($kit.event,arguments);
}
*/
this.eventExtraInfoFnArray = [];
	this.registExtraEventInfo(function(){
	return $Kit.prototype.evExtra.apply($kit,arguments);
}
);
	this.registExtraEventInfo(function(){
	return{
	dragElement:this.dragElement}
;
}
);
	this.registExtraEventInfo(function(){
	return{
	dragStartEventInfo:this.dragStartEventInfo}
;
}
);
}
$kit.merge($Kit.Event.prototype,/** * @lends $Kit.Event.prototype * @enum */
{
	KEYCODE_UP:38,KEYCODE_DOWN:40,KEYCODE_LEFT:37,KEYCODE_RIGHT:39,//KEYCODE_ADD:107,KEYCODE_SUB:109,KEYCODE_MULTIPLY:106,KEYCODE_DIVIDE:111,//KEYCODE_ENTER:13,KEYCODE_ESC:27,KEYCODE_BACKSPACE:8,KEYCODE_TAB:9,//KEYCODE_SHIFT:16,KEYCODE_CTRL:17,KEYCODE_ALT:18,//KEYCODE_INSERT:45,KEYCODE_DELETE:46,//KEYCODE_PAGEUP:33,KEYCODE_PAGEDOWN:34}
,/** * @lends $Kit.Event.prototype */
{
	//event增强start/** * 递归 * @private */
recurEv:function(evCfg,fn){
	var me = this;
	if($kit.isAry(evCfg.el)){
	$kit.each(evCfg.el,function(el){
	fn.call(me,$kit.join(evCfg,{
	el:el}
));
}
);
}
else if($kit.isCanSplit2Ary(evCfg.el)){
	me.recurEv($kit.join(evCfg,{
	el:evCfg.el.split($kit.CONSTANTS.REGEXP_SPACE)}
),fn);
}
else if($kit.isStr(evCfg.el)){
	var _el = $kit.el(evCfg.el);
	if($kit.isEmpty(_el)){
	_el = $kit.el("#" + evCfg.el);
}
if(!$kit.isEmpty(_el)){
	fn.call(me,$kit.join(evCfg,{
	el:_el}
));
}
}
else if($kit.isAry(evCfg.ev)){
	$kit.each(evCfg.ev,function(ev){
	fn.call(me,$kit.join(evCfg,{
	ev:ev}
));
}
);
}
else if($kit.isCanSplit2Ary(evCfg.ev)){
	me.recurEv($kit.join(evCfg,{
	ev:evCfg.ev.split($kit.CONSTANTS.REGEXP_SPACE)}
),fn);
}
else{
	return true;
}
}
,/** * kit事件注册方法，支持拖拽 * @param{
	Object}
config * @param{
	Selector|Element|NodeList}
config.el 触发事件的元素，等于event.currentTarget * @param{
	String}
config.ev 事件type，如click * @param{
	Function}
config.fn 事件方法 * @param{
	Object}
config.scope this指针 */
ev:function(config){
	var me = this,defaultConfig ={
	el:null,ev:null,fn:null}
config = $kit.join(defaultConfig,config);
	if($kit.isEmpty(config.el) || $kit.isEmpty(config.ev) || !$kit.isFn(config.fn)){
	return;
}
if(me.recurEv(config,me.ev)){
	var ev = config.ev.trim(),el = config.el;
	if('ondrag' in el){
	//使用IE自带的drag事件，考虑到HTML5的普及，直接使用现成的if(me._isDragEv(ev) && el._flag_kitjs_drag_regist != true){
	el._flag_kitjs_drag_regist = true;
	el.style.cursor = 'move';
	$kit.attr(el,'draggable','true');
	if($kit.isIE()){
	//如果是IEme._ev({
	el:el,ev:'mousedown',fn:function(e){
	var el = e.currentTarget;
	el.dragDrop && el.dragDrop();
	el._kitjs_dd_mousedown = true;
	//el._kitjs_dd_origin_positoin = $kit.css(el,'position');
}
}
);
	me._ev({
	el:el,ev:'dragstart',fn:function(e){
	var el = e.currentTarget;
	//e.dataTransfer.effectAllowed = "all";
	me.dragElement = e.currentTarget;
	me.dragStartEventInfo ={
	clientX:e.clientX,clientY:e.clientY,offsetTarget:e.target.offsetParent,offsetTargetOffset:$kit.offset(e.target.offsetParent),offsetTargetClientOffset:$kit.dom.clientOffset(e.target.offsetParent)}
e.dataTransfer.setData("text",e.currentTarget.innerHTML);
	//e.dataTransfer.setDragImage(e.target,0,0);
	if(el._kitjs_dd_start != true){
	//// var cloneNode = document.createElement('div');
	// $kit.css(cloneNode,{
	// position:'absolute',// display:'block',// width:$kit.offset(el).width,// height:$kit.offset(el).height,// border:'2px dashed #aaa',// backgroundColor:'transparent',// opacity:0.5//}
);
	// document.body.appendChild(cloneNode);
	// $kit.css(cloneNode,{
	// top:e.pageY - 2,// left:e.pageX - 2//}
);
	// $kit.css(el,{
	// position:'absolute',// top:el.offsetTop,// left:el.offsetLeft//}
);
	el._kitjs_dd_start = true;
	el._kitjs_dd_drag = true;
	//el._kitjs_dd_cloneNode = cloneNode;
}
}
}
);
	me._ev({
	el:el,ev:'drag',fn:function(e){
	var el = e.currentTarget;
	//e.dataTransfer.effectAllowed = "all";
	if(el._kitjs_dd_mousedown == true){
	// $kit.css(el._kitjs_dd_cloneNode,{
	// position:'absolute',// display:'block',// top:e.pageY - 2,// left:e.pageX - 2//}
);
	el._kitjs_dd_drag = true;
}
}
}
);
	me._ev({
	el:el,ev:'dragend',fn:function(e){
	me.dragElement = null;
	me.dragStartEventInfo = null;
	var el = e.currentTarget;
	el._kitjs_dd_mousedown = false;
	el._kitjs_dd_drag = false;
	el._kitjs_dd_start = false;
	// $kit.css(el._kitjs_dd_cloneNode,{
	// display:'none',// 'z-index':-1//}
);
}
}
);
	el._kitjs_dd_init = true;
	el._kitjs_dd_start = false;
	el._kitjs_dd_drag = false;
	el._kitjs_dd_mousedown = true;
}
else{
	//非IEme._ev({
	el:el,ev:'dragstart',fn:function(e){
	var el = e.currentTarget;
	//e.dataTransfer.dropEffect = 'move';
	//e.dataTransfer.effectAllowed = "all";
	//e.dataTransfer.setDragImage(ev.target,0,0);
	me.dragElement = e.currentTarget;
	e.dataTransfer.setData("text",e.currentTarget.innerHTML);
	me.dragStartEventInfo ={
	clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY,layerX:e.layerX,layerY:e.layerY,offsetTarget:e.target.offsetParent,offsetTargetOffset:$kit.offset(e.target.offsetParent),offsetTargetClientOffset:$kit.dom.clientOffset(e.target.offsetParent)}
}
}
);
	me._ev({
	el:el,ev:'drag',fn:function(e){
	//e.dataTransfer.effectAllowed = "all";
}
}
);
	me._ev({
	el:el,ev:'dragend',fn:function(e){
	me.dragElement = null;
}
}
);
}
}
else if(me._isDropEv(ev) && el._flag_kitjs_drop_regist != true){
	el._flag_kitjs_drop_regist = true;
	me._ev({
	el:el,ev:'dragover',fn:function(e){
	e.stopDefault();
}
}
);
}
else{
	//mousemove代替drag事件，暂时hold/* if(!el._kitjs_dd_init){
	me._ev({
	el:el,ev:'mousedown',fn:function(e){
	var el = e.currentTarget;
	if(el._kitjs_dd_init){
	el._kitjs_dd_start = false;
	el._kitjs_dd_drag = false;
	el._kitjs_dd_mousedown = true;
}
}
}
);
	el._kitjs_dd_init = true;
	me._ev({
	el:el,ev:'mousemove',fn:function(e){
	var el = e.currentTarget;
	if(el._kitjs_dd_init == true && el._kitjs_dd_mousedown == true){
	if(el._kitjs_dd_start != true){
	$kit.newEv({
	el:el,ev:'dragstart'}
);
	el._kitjs_dd_start = true;
}
el._kitjs_dd_drag = true;
	$kit.newEv({
	el:el,ev:'drag'}
);
}
}
}
);
	me._ev({
	el:el,ev:'mouseup',fn:function(e){
	var el = e.currentTarget;
	if(el._kitjs_dd_drag == true && el._kitjs_dd_init == true){
	$kit.newEv({
	el:el,ev:'dragend'}
);
	el._kitjs_dd_drag = false;
	el._kitjs_dd_start = false;
	el._kitjs_dd_mousedown = false;
}
}
}
);
}
*/
}
//}
me._ev(config);
}
}
,_isDragEv:function(ev){
	var ev = ev.toLowerCase().trim();
	if(ev == 'dragstart'//|| ev == 'drag'//|| ev == 'dragend'//){
	return true;
}
return false;
}
,_isDropEv:function(ev){
	var ev = ev.toLowerCase().trim();
	if(ev == 'dragenter'//|| ev == 'dragleave'//|| ev == 'dragover'//|| ev == 'drop'//){
	return true;
}
return false;
}
,//event增强enddraggable:function(el){
	var me = this;
	if(el['kitjs-draggable']){
	return;
}
el['kitjs-draggable'] = true;
	me.ev({
	el:el,ev:'drag',fn:function(e,cfg){
	//e.dataTransfer.setDragImage(e.target,0,0);
	//设置拖拽图片if(e.dragStartEventInfo && e.dragStartEventInfo.offsetTarget != document.body){
	var position = $kit.css(e.dragStartEventInfo.offsetTarget,'position');
	var distanceX = 0,distanceY = 0;
	/* if(e.clientX == 0 && e.screenX > 0){
	distanceX = e.screenX - e.dragStartEventInfo.screenX;
}
else if(e.clientX == 0 && e.screenX == 0 && e.layerX > 0){
	distanceX = e.layerX - e.dragStartEventInfo.layerX;
}
else{
	distanceX = e.clientX - e.dragStartEventInfo.clientX;
}
if(e.clientY == 0 && e.screenY > 0){
	distanceY = e.screenY - e.dragStartEventInfo.screenY;
}
else if(e.clientY == 0 && e.screenY == 0 && e.layerY > 0){
	distanceY = e.layerY - e.dragStartEventInfo.layerY;
}
else{
	distanceY = e.clientY - e.dragStartEventInfo.clientY;
}
*/
if(e.clientX == 0 && e.screenX > 0){
	distanceX = e.screenX - e.dragStartEventInfo.screenX;
}
else if(e.clientX > 0){
	distanceX = e.clientX - e.dragStartEventInfo.clientX;
}
if(e.clientY == 0 && e.screenY > 0){
	distanceY = e.screenY - e.dragStartEventInfo.screenY;
}
else if(e.clientY > 0){
	distanceY = e.clientY - e.dragStartEventInfo.clientY;
}
if(distanceY != 0 || distanceX != 0){
	if(position && position.toLowerCase() == 'fixed'){
	var pos ={
	top:e.dragStartEventInfo.offsetTargetClientOffset.top + distanceY + 'px',left:e.dragStartEventInfo.offsetTargetClientOffset.left + distanceX + 'px'}
;
	$kit.css(e.dragStartEventInfo.offsetTarget,pos);
}
else if(position && position.toLowerCase() == 'absolute'){
	var pos ={
	top:e.dragStartEventInfo.offsetTargetOffset.top + distanceY + 'px',left:e.dragStartEventInfo.offsetTargetOffset.left + distanceX + 'px'}
;
	$kit.css(e.dragStartEventInfo.offsetTarget,pos);
}
}
}
}
,scope:el}
);
	me.ev({
	el:el,ev:'dragend',fn:function(e,cfg){
	if(e.dragStartEventInfo && e.dragStartEventInfo.offsetTarget != document.body){
	var position = $kit.css(e.dragStartEventInfo.offsetTarget,'position');
	var distanceX = 0,distanceY = 0;
	if(e.clientX == 0 && e.screenX > 0){
	distanceX = e.screenX - e.dragStartEventInfo.screenX;
}
else{
	distanceX = e.clientX - e.dragStartEventInfo.clientX;
}
if(e.clientY == 0 && e.screenY > 0){
	distanceY = e.screenY - e.dragStartEventInfo.screenY;
}
else{
	distanceY = e.clientY - e.dragStartEventInfo.clientY;
}
if(distanceY != 0 || distanceX != 0){
	if(position && position.toLowerCase() == 'fixed'){
	$kit.css(e.dragStartEventInfo.offsetTarget,{
	top:e.dragStartEventInfo.offsetTargetClientOffset.top + distanceY + 'px',left:e.dragStartEventInfo.offsetTargetClientOffset.left + distanceX + 'px'}
);
}
else if(position && position.toLowerCase() == 'absolute'){
	$kit.css(e.dragStartEventInfo.offsetTarget,{
	top:e.dragStartEventInfo.offsetTargetOffset.top + distanceY + 'px',left:e.dragStartEventInfo.offsetTargetOffset.left + distanceX + 'px'}
);
}
}
}
}
,scope:el}
);
}
,evExtra:function(ev){
	var me = this;
	var re ={
}
;
	for(var i = 0;
	i < $kit.event.eventExtraInfoFnArray.length;
	i++){
	if($kit.isFn(me.eventExtraInfoFnArray[i])){
	$kit.merge(re,me.eventExtraInfoFnArray[i].call(me,ev));
}
else{
	$kit.merge(re,me.eventExtraInfoFnArray[i]);
}
}
return re;
}
,registExtraEventInfo:function(fn){
	this.eventExtraInfoFnArray.push(fn);
}
}
);
	/** * $Kit.Event的实例，直接通过这个实例访问$Kit.Event所有方法 * @global * @type $Kit.Event */
$kit.event = new $Kit.Event();
	/*$kit.ev = function(){
	$kit.event.ev.apply($kit.event,arguments);
}
;
	*/
$kit.evExtra = function(){
	return $Kit.Event.prototype.evExtra.apply($kit.event,arguments);
}
;

CSS代码(css.css):

body{width:980px;margin:0 auto;font-family:"微软雅黑";color:#7d7d7d;}
img{border:0;}
h1,h2{text-align:center;position:relative;}
h1{color:#0092d3;}
h2{color:#53bde8;}
h3,h4,h5,h6{margin:0;}
ul,ol,li{margin:0;padding:0;text-align:left;vertical-align:top;}
li *{vertical-align:middle;}
a{color:#7d7d7d;}
a:hover{color:#000;}
.indent{margin-left:2em;}
.footer{text-align:right;font-size:12px;}
h1 img{vertical-align:middle;}
.code{margin-left:2em;background-color:#aaa;border-radius:5px;padding:5px;font-size:14px;color:#fff;}

CSS代码(demo.css):

.puzzle ul li{padding:0;float:left;display:block;*display:inline;*zoom:1;margin:2px;width:200px;height:200px;overflow:hidden;background-image:url(game.png);list-style:none;}
li.l1{background-position:0 0;}
li.l2{background-position:-200px 0;}
li.l3{background-position:-400px 0;}
li.l4{background-position:0 -200px;}
li.l5{background-position:-200px -200px;}
li.l6{background-position:-400px -200px;}
li.l7{background-position:0 -400px;}
li.l8{background-position:-200px -400px;}
li.l9{background-position:-400px -400px;}
.puzzle{margin-top:20px;text-align:center;}
.puzzle ul{width:612px;height:612px;display:block;margin:0;margin:0 auto;padding:0;overflow:hidden;*zoom:1;}

附件:下载该文件资源,减少时间成本(增值服务)