- 浏览: 24101 次
- 性别:
- 来自: 北京
最新评论
-
梧栖凤:
得把未经处理的脚本分享出来啊!
跨浏览器可8方向拖拽剪裁框 -
percy30856:
好东西 正在弄这个玩意儿 参考学习了
Animate Baseclass -
percy30856:
菲哥 你的头像,应该换成未满18岁禁止查看
很棒的时间线控件 -
stoneskin:
:哭笑写javascript的也是猿。。。。我们很多猿都是从写 ...
核心只要两行即可实现添加或移除className -
jamesmos:
enix2212 写道tiannet 写道enix2212 写 ...
核心只要两行即可实现添加或移除className
1.跨浏览器,主流浏览器都可以运行
2.纯javascript开发。
3.配置实用方便。
4.二次开发简单,易用。
传送门 在线试玩
成品预览,见附近
用一张图片用坐标的方式生成拼图单元格,类似css sprite。大致思路是,每个单元格有对应的两个索引,由数据驱动显示。创建实例时吧0-9乱序排列,每个单元格对应两个索引,一个是真实所在位置的索引,一个是记录现在位置的索引。拖动图片的时调整记录现在位置的索引,去对比原始数组如果值相等,那么就可以确定拼图完成。
1.乱序排列[0-9]的数组生成一个新数组,来产生拼图单元格的排序。为了避免生成不符合需求的数组,比较然后递归。
indicator.fn.unordered = function (array) { //乱序排列 array=array || [0,1,2,3,4,5,6,7,8,9]; if (({}).toString.call(array).indexOf('Array') === -1) return; var arr = [], value = array.toString(); arr = array.sort(function () { return Math.random() > 0.5 ? -1 : 1; }); (arr.toString() === value) && arguments.callee(array); return arr; };
2.主要难点在于拖拽时实时去检测现在单元格与其他单元格的位置关系,判断拖动的单元格是不是进入其他单元格而不是在自己的占位单元格。如果不符合要求,则把拖拽元素放回原始位置。
indicator.fn.checkPosition=function(e){ //检查单元格位置,符合条件插入 不符合条件放回原处 e=that.getEvent(e); var i=that.htmls.length,size=null,pointer = [e.clientX,e.clientY]; for(;i--;){ size=that.getClinetRect(that.htmls[i]); if(size.top < pointer[1] && size.bottom>pointer[1]){ if(size.left<pointer[0] && size.right>pointer[0]){ that.htmls[i]===indicator.currentTarget || that.replaceElement(that.htmls[i]); }else{ that.restore(); } } } };
3.为了避免拖拽元素时导致单元格产生的重新排列导致的错位,所以要产生一个占位单元格,这占位的单元格克隆自拖拽单元格。
indicator.fn.createPlaceholder=function(T){ var node=T.cloneNode(true); node.innerHTML=''; node.style.display='none'; node.className='placeholder'; T.parentNode.insertBefore(node,T); that.placeholder=node; };
4.界定拖拽单元格是否进入其他单元格,左顶点大于当前单元格的top,left但是小于当前单元格的bottom,right
indicator.fn.checkPosition=function(e){ //检查单元格位置,符合条件插入 不符合条件放回原处 e=that.getEvent(e); var i=that.htmls.length,size=null,pointer = [e.clientX,e.clientY]; for(;i--;){ size=that.getClinetRect(that.htmls[i]); if(size.top < pointer[1] && size.bottom>pointer[1]){ if(size.left<pointer[0] && size.right>pointer[0]){ that.htmls[i]===indicator.currentTarget || that.replaceElement(that.htmls[i]); }else{ that.restore(); } } } };
5.调整单元格时,要改变拖拽单元个的两个记录位置的属性,还要改变当前单元格的两个位置属性,再调整记录位置的数组
这里的处理我觉得也是最繁复最有挑战的地方,修改了很久
indicator.fn.replaceElement=function(targetNode){ //摆放单元至正确位置 var current=indicator.currentTarget,k1=that.htmls,k2=that.sn,temp,j=0,k=0,a1=[-1,-1],a2=null,a3=-1,arr=[],parent=that.parent.children[0],li; current.style.position='static'; that.index=[]; for(;k<k1.length;k++){ if(targetNode===that.htmls[k]) {a1[0]=k;} if(current===that.htmls[k]) {a1[1]=k;} } a1.sort(); a2=k1[a1[0]]; k1[a1[0]]=k1[a1[1]]; k1[a1[1]]=a2; a3=k2[a1[0]]; k2[a1[0]]=k2[a1[1]]; k2[a1[1]]=a3; parent.innerHTML=''; for(;j<k1.length;j++){ li=that.htmls[j]; that.index.push(that.htmls[j].index); try{parent.appendChild(li)}catch(e){} } };
6.在释放鼠标时,检查原始数组和记录位置数组的值十分相等,确定是不是拼图完成。
that.index.join('')===that.sn.sort().join('')
发表评论
-
避免悲剧 密码生成器
2011-12-22 15:35 742最近被暴库的很多,密码安全成为重大问题!如何避免简单密码呢?还 ... -
jQuery创建实例与原型继承揭秘
2011-12-20 23:57 762在普通情况下 ... -
[Javascript]单例模式(singleton )
2011-12-16 15:23 1314Javascript中大家都很习惯用new运算符创建实例。现在 ... -
javascript1.7新语法
2011-12-13 18:30 8701.yield 关键字 Yield的作用与return 差不多 ... -
javascript undo redo
2011-12-09 10:55 2375在浏览器中用调试工具看调用结果 <!DOCTYPE ... -
duffsDevice 高速版
2011-11-25 17:21 788function duffsDevice(items, f ... -
ECMAScript.js2
2011-11-07 11:18 1326package { public native functio ... -
仅限正整数输入
2011-10-27 15:35 865修正了拖拽文本进输入框问题 2011.11.14 &l ... -
Another JavaScript quiz
2011-08-19 18:34 640测试题来自《Another JavaScript quiz》P ... -
跨浏览器可8方向拖拽剪裁框
2011-08-15 20:01 871<!DOCTYPE html PUBLIC &quo ... -
选项卡
2011-08-12 17:36 891<!DOCTYPE html PUBLIC &quo ... -
scroll base
2011-08-04 14:25 886开发版,水平方向已完成,垂直方向没测,可以跨浏览,滚动多个当前 ... -
拖拽排序列表单例
2011-07-27 11:17 1169<!DOCTYPE html PUBLIC &quo ... -
Animate Baseclass
2011-07-12 15:47 1184以下代码仅供参考,请下载附件代码,应该是文本编辑器过滤掉了某些 ... -
很棒的时间线控件
2011-06-24 18:52 1639原生态javascript,希望大家能喜欢 functio ... -
fade方法
2011-05-27 10:12 771function fadeOut(steps){ ... -
核心只要两行即可实现添加或移除className
2011-04-29 11:10 1748<div id="abc" cl ... -
让函数有记忆能力
2011-04-28 15:34 683function addEvent(elem,evType ... -
可以跳动的手风琴 Accordion
2011-04-13 15:02 764<!DOCTYPE html PUBLIC &q ... -
javascript new 关键字的运行原理
2011-04-06 17:33 1537function javascriptNew(t){ a= ...
相关推荐
C# 9宫格数学拼图
jQuery实现的9宫格拼图游戏效果.zip
安卓6宫格图片拼图组图,拼图预览,文字添加
使用A*算法实现的9宫格拼图小游戏,包含源码和程序
一个用netbeans开发制作的拼图小游戏,游戏为9宫格拼图游戏,
该项目是由本人用C#语言开发的拼图游戏,该游戏源码详尽,功能丰富,支持多种外部操作,界面整洁可观。
过年公司做的抢红包小游戏-拼图游戏; 可九宫格也可十二宫格,也可自定义多宫格;
javascript H5 APP网页游戏_九宫格,16宫格抽奖大转盘(源代码)
delphi源码。这里是数字游戏,可以改成拼图游戏。
基于QT实现的9宫格数字,字母输入法。支持密码类型输入,输入之后显示.代替输入内容
这是 android手机 9宫格解锁软件 任何一款手机都可以装 经测试 100%可信
iphone 9个图片,点击之后跳转到相应View ,实现9宫格。
人物拼图游戏使用.net c#开发,VS2017下编译通过,测试正常。
在Starling中对载入的纹理进行9宫格缩放。
9宫格 12宫格 二维散点图python 科研绘图
Android9宫格