最近做一个简单的鼠标拖动,但是网上的方法可能不适合我这种新手,这有种简单扽方法
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>