基于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 相关文章推荐
JavaScript关于select的相关操作说明
Jan 13 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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 array_map()数组函数使用说明
2011/07/12 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php的扩展写法总结
2019/05/14 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
js实现简单的验证码
2015/12/25 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
个人主要事迹材料
2014/08/26 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
什么是SOLID
2022/03/24 Javascript
移除Selenium中window.navigator.webdriver值
2022/06/10 Python
python数字图像处理:图像简单滤波
2022/06/28 Python