简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 春 节 23
2021年 情人节 25
2021年 元宵节 37
2022年 元 旦 346
全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
  • 您现在的位置:首页 >> JS >> 内容

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

    内容摘要: scriptwindow.onload = function() { var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var disX = 0; var disY = 0; var minZindex = 1; var aPos = [];......

      <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);

    }

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/11/4 发布时间:15:42:53 点击:541 录入:齐天大圣
  • 上一篇:js实现星星海特效的示例
  • 下一篇:CSS3+JS滚动数字时钟代码
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.88 Build 20.12.22(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021