基于js实现的图片拖拽排序源码实例


Posted in Javascript onNovember 04, 2020

效果图:

基于js实现的图片拖拽排序源码实例

直接上代码

<script>
 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];
   }
  }
 }
</script>

 

<ul id="ul1">
 <li><img src="https://www.jq22.com/img/cs/500x500-1.png" width="200" height="150 "></li>
  <li><img src="https://www.jq22.com/img/cs/500x500-2.png " width="200 " height="150 "></li>
  <li><img src="https://www.jq22.com/img/cs/500x500-3.png " width="200 " height="150 "></li>
  <li><img src="https://www.jq22.com/img/cs/500x500-4.png " width="200 " height="150 "></li>
  <li><img src="https://www.jq22.com/img/cs/500x500-5.png " width="200 " height="150 "></li>
  <li><img src="https://www.jq22.com/img/cs/500x500-6.png " width="200 " height="150 "></li>
 </ul>
* {
	margin:0;
	padding:0;
	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;
}
//通过class获取元素
function getClass(cls) {
 var ret = [];
 var els = document.getElementsByTagName("*");
 for (var i = 0; i < els.length; i++) {
  //判断els[i]中是否存在cls这个className;.indexOf("cls")判断cls存在的下标,如果下标>=0则存在;
  if (els[i].className === cls || els[i].className.indexOf("cls") >= 0 || els[i].className.indexOf(" cls") >= 0 || els[i].className.indexOf(" cls ") > 0) {
   ret.push(els[i]);
  }
 }
 return ret;
}

function getStyle(obj, attr) { //解决JS兼容问题获取正确的属性值
 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}

function startMove(obj, json, fun) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
  var isStop = true;
  for (var attr in json) {
   var iCur = 0;
   //判断运动的是不是透明度值
   if (attr == "opacity") {
    iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
   } else {
    iCur = parseInt(getStyle(obj, attr));
   }
   var ispeed = (json[attr] - iCur) / 8;
   //运动速度如果大于0则向下取整,如果小于0想上取整;
   ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
   //判断所有运动是否全部完成
   if (iCur != json[attr]) {
    isStop = false;
   }
   //运动开始
   if (attr == "opacity") {
    obj.style.filter = "alpha:(opacity:" + (json[attr] + ispeed) + ")";
    obj.style.opacity = (json[attr] + ispeed) / 100;
   } else {
    obj.style[attr] = iCur + ispeed + "px";
   }
  }
  //判断是否全部完成
  if (isStop) {
   clearInterval(obj.timer);
   if (fun) {
    fun();
   }
  }
 }, 30);
}

总结

到此这篇基于js实现的图片拖拽排序源码的文章就介绍到这了,更多相关js图片拖拽排序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
通过JS运行机制的角度说说作用域
Mar 12 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 #Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 #Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 #Javascript
Vue绑定用户接口实现代码示例
Nov 04 #Javascript
vant picker+popup 自定义三级联动案例
Nov 04 #Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 #Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 #Javascript
You might like
提升PHP速度全攻略
2006/10/09 PHP
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
python openpyxl使用方法详解
2019/07/18 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python groupby 函数 as_index详解
2019/12/16 Python
自学python用什么系统好
2020/06/23 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
thinkphp5 路由分发原理
2021/03/18 PHP
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
百度软件工程师职位
2013/02/14 面试题
综合素质的自我鉴定
2013/10/07 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript