基于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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
JS与框架页的操作代码
Jan 17 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
vue中实现上传文件给后台实例详解
Aug 22 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
php7 新增功能实例总结
2020/05/25 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
原生js开发的日历插件
2017/02/04 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python对wav文件的重采样实例
2020/02/25 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
社会实践心得体会
2014/01/03 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python