基于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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
JavaScript的function函数详细介绍
Nov 20 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许愿墙模块功能分析
2013/06/25 PHP
php class类的用法详细总结
2013/10/17 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JS打印彩色菱形的实例代码
2018/08/15 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python排序方法实例分析
2015/04/30 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
测绘工程专业求职信
2014/07/15 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis