html鼠标拖动

最新推荐文章于 2022-05-25 19:41:11 发布

Author1thy

最新推荐文章于 2022-05-25 19:41:11 发布

阅读量903

点赞数 1

文章标签： html 拖拽

本文链接：https://blog.csdn.net/Author1thy/article/details/82343755

版权

最近做一个简单的鼠标拖动，但是网上的方法可能不适合我这种新手，这有种简单扽方法

1.给要拖动的控件加上 draggable=”true” 目前只有 Firefox、Chrome 以及 Safari 支持 draggable 属性

2.dragstart,拖拽前触发，drag,拖拽前、拖拽结束之间，连续触发，dragend,拖拽结束触发

下面时代码，第一次使用有冗余代码请见谅，如果需要复杂的效果建议使用插件

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<title>Insert title here</title>
<style>
.mianmabn {
    width: 40%;
    float: left;
}

.anniu {
    position: relative ;
    margin-top: 3%; width : 10%;
    margin-left: 4%;
    float: left;
    top: 20%;
    width: 10%;
    width: 10%;
}
.size{
height: 250px;
}
#weiyouxiangmu {
    position: relative;
    top: -80px;
    right: -50px;
}
li{
margin: 5px;
}
#proName  .delete a{
background: #ccc;
}
#unproName .insert a{
background: #ccc;
}
</style>
</head>
<body>
    <div class="panel panel-primary"
        style="width: 900px; position: relative; margin: 0 auto; top: 50px">
        <div class="panel-heading">
            <h3 class="panel-title">${dep.name}</h3>
        </div>
        <div class="panel-body ">
            <div class="panel panel-info mianmabn" id="yiyouxiangmu">
                <div class="panel-heading">
                    <h3 class="panel-title">已有项目</h3>
                </div>
                <div class="panel-body size">
                    <ul class="pager" id="proName">
                        <c:forEach items="${pros }" var="pro">
                            <li data-id="${pro.project.id }" class="li1" draggable="true"><a  style="position: relative;" >${pro.project.name }</a></li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            <button type="button" class="btn btn-info anniu" id="insertBt"
                name="insertBt">增加项目</button>
            <br> <br>
            <br>
            <br>
            <button type="button" class="btn btn-info anniu" id="deleteBt"
                name="deleteBt">删除项目</button>
            <div class="panel panel-danger mianmabn" id="weiyouxiangmu">
                <div class="panel-heading ">
                    <h3 class="panel-title">未有项目</h3>
                </div>
                <div class="panel-body size">
                    <ul class="pager" id="unproName">
                        <c:forEach items="${unpros }" var="pro">
                            <li data-id="${pro.project.id }" class="li2" draggable="true"> <a >${pro.project.name }</a></li>

                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/Tdrag.js"></script>
<script>
$().ready(function(){
    $("#back").click(function(){
        location.href="Department";
    })
    $("#insertBt").click(function(){
        if($(".insert").length==0){
            alert("单机选择要添加部门");
        }else{
        var ids="";
        $(".insert").each(function(){      
            ids+=$(this).data("id")+",";           
        });     
        ids=ids.substring(0,ids.length-1);  

        insert1(ids);
        }
    })
    $("#deleteBt").click(function(){
        if($(".delete").length==0){
            alert("单机选择要删除部门");
        }else{
            var ids="";
            $(".delete").each(function(){      
                ids+=$(this).data("id")+",";           
            });     
            ids=ids.substring(0,ids.length-1);  
            delete1(ids);
        }
    })
    var flag=false;
    $("#proName").on("mousedown","li",function(){      
        $(this).toggleClass("delete");
        if(flag){
            var ids=$(this).data("id");
            delete1(ids);
            flag=false;
        }

    })
    var flag1=false;
    $("#unproName").on("mousedown","li",function(){

        $(this).toggleClass("insert");
        if(flag1){
            var ids=$(this).data("id");
            insert1(ids);
            flag1=false;
        }
    })





    function delete1(ids){

        $.ajax({
            url:"Department",
            type:"get",         
            data:{proid:ids,
                operation:"deletePro1"
            },
            datatype:"text",
            success:function(data){     

                if(data=="true"){
                     $(".delete").each(function(){
                         var li="<li draggable='true' class='li2' data-id="+$(this).data('id')+"><a>"+$(this).find('a').text()+"</a></li>";
                         $("#unproName").append(li); 

                     })                 
                 $(".delete").remove();

                }

            }

        });
    }
    function insert1(ids){
        $.ajax({
            url:"Department",
            type:"get",         
            data:{proid:ids,
                operation:"insertPro1"
            },
            datatype:"text",
            success:function(data){     

                if(data=="true"){
                     $(".li1").unbind("Tdrag");
                     $(".insert").each(function(){
                         var li="<li draggable='true' class='li1' data-id="+$(this).data('id')+" ><a>"+$(this).find('a').text()+"</a></li>";
                         $("#proName").append(li); 

                     })                 
                 $(".insert").remove();

                    }
                }

            })


        }
    $("#proName").on("dragend","li",function(event){   
        var left = event.pageX;
        var right = event.pageY;
        var dx =$('#weiyouxiangmu').offset().left;
        var dx1 =dx+345;
        var dy =$('#weiyouxiangmu').offset().top;
        var dy1=dy+250;

        if(left>dx&&left<dx1&&right>dy&&right<dy1){         
            var ids="";
            $(".delete").each(function(){      
                ids+=$(this).data("id")+",";           
            });     
            ids=ids.substring(0,ids.length-1);  
            delete1(ids);



        }

    });
    $("#unproName").on("dragend","li",function(event){ 
        var left = event.pageX;
        var right = event.pageY;
        var dx =$('#yiyouxiangmu').offset().left;
        var dx1 =dx+345;
        var dy =$('#yiyouxiangmu').offset().top;
        var dy1=dy+250;

        if(left>dx&&left<dx1&&right>dy&&right<dy1){         
            var ids="";
            $(".insert").each(function(){      
                ids+=$(this).data("id")+",";           
            });     
            ids=ids.substring(0,ids.length-1);  
            insert1(ids);


        }

    });



})


</script>

Author1thy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html鼠标拖动

最近做一个简单的鼠标拖动，但是网上的方法可能不适合我这种新手，这有种简单扽方法1.给要拖动的控件加上 draggable=”true” 目前只有 Firefox、Chrome 以及 Safari 支持 draggable 属性2.dragstart,拖拽前触发，drag,拖拽前、拖拽结束之间，连续触发，dragend,拖拽结束触发下面时代码，第一次使用有冗余代码请见谅，如果需要复杂...
复制链接

扫一扫