好友js拖动分组

最新推荐文章于 2024-04-08 13:09:07 发布

_小李哥

最新推荐文章于 2024-04-08 13:09:07 发布

阅读量1.2k

点赞数

分类专栏：工作

本文链接：https://blog.csdn.net/cocoaxian/article/details/53033862

版权

工作专栏收录该内容

17 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>


<head>
<title>DragSort Example</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
</head>


<body>


<ul id ="groupList">
<li><div id="frendGroup1" style="width: 60px;height: 60px;border: 1px solid #CCCCCC;"></div></li>
<li><div id="frendGroup2" style="width: 60px;height: 60px;border: 1px solid #CCCCCC;"></div></li>
<li><div id="frendGroup3" style="width: 60px;height: 60px;border: 1px solid #CCCCCC;"></div></li>
</ul>

<ul id="friendList">
<li value="111">你猜</li>
<li value="222">你不猜</li>
<li value="333">你不猜你不猜</li>
<li value="444">猜猜</li>
<li value="555">你猜不猜</li>
<li value="666">你猜不猜不猜</li>
<li value="777">你不猜不猜</li>
</ul>


<!-- save sort order here which can be retrieved on server on postback -->


<script type="text/javascript">
$("#friendList").dragsort({
dragSelector: "li",
dragBetween: true,
//dragEnd: saveOrder,
//placeHolderTemplate: "<li class='placeHolder'></li>"
});


/*function saveOrder() {
var data = $("#list2 li").map(function() {
return $(this).children().html();
}).get();
$("input[name=list1SortOrder]").val(data.join("|"));

alert(data);
};*/


var friendId = "";
var groupId = "";
var time1 = '';
$("#friendList li").mouseup(function() {
if(groupId == ""){
friendId = $(this).attr("id");
var myDate = new Date();
time1 = myDate.getTime();
}
});
$("#groupList li").mousemove(function() {
var myDate = new Date();
var time2 = myDate.getTime();
if(friendId != "" && (parseInt(time2)-parseInt(time1))<10 ){
groupId = $(this).attr("id");
var groupName = $(this).attr("value");
$("#"+ friendId).empty();
$("#"+ friendId).remove();
//alert(friendId + "移动到了" + groupId + "组名" + groupName);
selectChange(friendId,groupId,groupName);
friendId = "";
}else{
groupId = "";
}
});
</script>
</body>


</html>