分享一款基于js的图片排序效果。鼠标拖动图片,重新排列图片的排列顺序。该插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  <ul id="ul1">
<li>
<img src="data:images/1.jpg" width="200" height="150" /></li>
<li>
<img src="data:images/2.jpg" width="200" height="150" /></li>
<li>
<img src="data:images/3.jpg" width="200" height="150" /></li>
<li>
<img src="data:images/4.jpg" width="200" height="150" /></li>
<li>
<img src="data:images/5.jpg" width="200" height="150" /></li>
<li>
<img src="data:images/6.jpg" width="200" height="150" /></li>
</ul>

css代码:

  *
{
margin:;
padding:;
list-style: none;
} #ul1
{
width: 660px;
position: relative;
margin: 10px auto;
}
#ul1 li
{
width: 200px;
height: 150px;
float: left;
list-style: none;
margin: 10px;
}
#ul1 li:hover
{
border-color: #9a9fa4;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);
}
#ul1 .active
{
border: 1px dashed red;
}

js代码:

  window.onload = function () {
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var disX = 0;
var disY = 0;
var minZindex = 1;
var aPos = [];
for (var i = 0; i < aLi.length; i++) {
var t = aLi[i].offsetTop;
var l = aLi[i].offsetLeft;
aLi[i].style.top = t + "px";
aLi[i].style.left = l + "px";
aPos[i] = { left: l, top: t };
aLi[i].index = i;
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = "absolute";
aLi[i].style.margin = 0;
setDrag(aLi[i]);
}
//拖拽
function setDrag(obj) {
obj.onmouseover = function () {
obj.style.cursor = "move";
}
obj.onmousedown = function (event) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
obj.style.zIndex = minZindex++;
//当鼠标按下时计算鼠标与拖拽对象的距离
disX = event.clientX + scrollLeft - obj.offsetLeft;
disY = event.clientY + scrollTop - obj.offsetTop;
document.onmousemove = function (event) {
//当鼠标拖动时计算div的位置
var l = event.clientX - disX + scrollLeft;
var t = event.clientY - disY + scrollTop;
obj.style.left = l + "px";
obj.style.top = t + "px";
/*for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线
if(colTest(obj,aLi[i])){
aLi[i].className = "active";
}
}*/
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
var oNear = findMin(obj);
if (oNear) {
oNear.className = "active";
}
}
document.onmouseup = function () {
document.onmousemove = null; //当鼠标弹起时移出移动事件
document.onmouseup = null; //移出up事件,清空内存
//检测是否普碰上,在交换位置
var oNear = findMin(obj);
if (oNear) {
oNear.className = "";
oNear.style.zIndex = minZindex++;
obj.style.zIndex = minZindex++;
startMove(oNear, aPos[obj.index]);
startMove(obj, aPos[oNear.index]);
//交换index
oNear.index += obj.index;
obj.index = oNear.index - obj.index;
oNear.index = oNear.index - obj.index;
} else { startMove(obj, aPos[obj.index]);
}
}
clearInterval(obj.timer);
return false; //低版本出现禁止符号
}
}
//碰撞检测
function colTest(obj1, obj2) {
var t1 = obj1.offsetTop;
var r1 = obj1.offsetWidth + obj1.offsetLeft;
var b1 = obj1.offsetHeight + obj1.offsetTop;
var l1 = obj1.offsetLeft; var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth + obj2.offsetLeft;
var b2 = obj2.offsetHeight + obj2.offsetTop;
var l2 = obj2.offsetLeft; if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {
return false;
} else {
return true;
}
}
//勾股定理求距离
function getDis(obj1, obj2) {
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
}
//找到距离最近的
function findMin(obj) {
var minDis = 999999999;
var minIndex = -1;
for (var i = 0; i < aLi.length; i++) {
if (obj == aLi[i]) continue;
if (colTest(obj, aLi[i])) {
var dis = getDis(obj, aLi[i]);
if (dis < minDis) {
minDis = dis;
minIndex = i;
}
}
}
if (minIndex == -1) {
return null;
} else {
return aLi[minIndex];
}
}
}

via:http://www.w2bc.com/Article/23686

基于js鼠标拖动图片排序的更多相关文章

  1. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  2. Unity UGUI实现鼠标拖动图片

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...

  3. js 鼠标上移 图片放大

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 【分享】jQuery无插件实现 鼠标拖动图片切换 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  6. js鼠标拖动(转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js鼠标拖动(转自刘68)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js 鼠标放到图片上放大某一部分效果

    动图效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. 《java 语言程序设计》第3、4章编程练习

    3.1 public class test { public static void main(String[] args) { System.out.println("Enter a, b ...

  2. Atlassian官方合作伙伴

    Atlassian官方合作伙伴 http://atlassian.csdn.net/m/btc/atlassian/index

  3. Makefile 编译静态库

    CC = gcc AR = ar FLAGS = -Wall -lpthread CLOUD = cloud_server OBJ += cloud_server.o LIB = libccloud. ...

  4. CentOS系统时间同步(NTP)

    CentOS系统时间同步的步骤如下: 新装的CentOS系统服务器可能设置了错误的,需要调整时区并调整时间. 如下是CentOS系统使用NTP来从一个时间服务器同步把当前时区调整为上海就是+8区,想改 ...

  5. IOS开发帐号与发布问题综合

    一.iOS开发:AD-HOC版应用测试方法:http://hi.baidu.com/kangle1208/item/163f39530abb4d3195eb05a7 二.plist的方式发布: 1.y ...

  6. 【iOS开发-59】LOL案例:单组tabView、alertView样式、实现监听,以及用reloadData数据刷新

    案例效果: (1)先在storyboard中拖拽出一个tableView,然后下面用代码. --tableView继承自scrollView.所以自然有滚动的特性 --最基本的还是数据转模型.以及对c ...

  7. 【树莓派】Linux 系统级别代理配置

    在Windows下,通过代理服务器怎么去设置连接代理服务器,浏览器---->工具------>internet选项----->连接--->局域网设置------->勾选“ ...

  8. iOS 设置app语言中文,比如 copy中文,拍照按钮cancel 中文

    iOS 设置app语言中文,比如 copy中文,拍照按钮cancel 中文 一:如何设置项目中文环境 targets--->Locatization native development reg ...

  9. 微信小程序 - 自定义模态对话框

    更新日期:2018-11-5 微信bug: 在for循环中使用组件时,遮罩层成黑层. 更新时间 2018-9-30 2018-9-30 1.在电脑上调试input超出输入框范围会出现文字模糊以及位移现 ...

  10. 简单测试Demo:如何用Java压缩文件夹和文件

    一.直接贴出测试代码 package com.jason.zip; import java.io.File; import java.io.FileInputStream; import java.i ...