<html>
<head>
<title>The Drag Drop effect</title>
<!-- import the JQuery Library -->
<script type="text/javascript" src="jquery.js"></script>
<!-- function codes -->
<script type="text/javascript">
<!-- body onload -->
$(function(){
<!-- to remenber the position where the pointer is -->
var posX,posY;
<!-- is allowd the DIV which show the items you selected display -->
var showFile=false;
<!-- to remenber the items name which you selected -->
var fileName="";
<!-- when you make a mouse down on the left panal -->
$("#sectionA").mousedown(function(){
showFile=true;
fileName="";
<!-- get the files name that you already selected and remenber it -->
$("#sectionA option:selected").each(function(i,item){
fileName+=$(item).text()+"<br/>";
});
});
<!-- when you release the mouse on the destination -->
$("#sectionB")
.mouseup(function(){
var obj=$(this);
<!-- to move the items to the destination -->
$("#sectionA :selected").each(function(i,item){
var content="<option value='"+$(item).attr('value')+"'>"+$(item).text()+"</option>";
obj.append(content);
$(item).remove();
});
})
;
<!-- when mouse move -->
$("body")
.mousemove(function(e){
if(showFile){
$("#showListContent")
.css({display:"block",left:e.pageX+5,top:e.pageY+5})
.html(fileName);
;
}
})
<!-- when release mouse -->
.mouseup(function(){
showFile=false;
$("#showListContent")
.css("display","none");
})
;
});
</script>
<!--
Author:Lovingshu's Forever
Date:2011-12-27 14:57
Remark:Actually,I want to finish this kind of effect long time ago~,but,I busy with my games~hehe ~
So I finish it today!This Effect makes you hava the effect like drag and drop!And I didn't finish it
ideally,but I like JQuery ~really!So~Thanks for your watching!
-->
<style type="text/css">
#showListContent{
position:absolute;
background-color:lightBlue;
border:none;
filter:alpha(opacity=50);
width:100px;
height:50px;
text-overflow:ellipsis;
overflow: hidden;
display:none;
font-size:12px;
}
</style>
</head>
<body>
<table border=1 bordercolor="lightBlue" cellspacing=0 align="center">
<tr>
<td>
<select id="sectionA" multiple style="height:300px;width:200px;">
<script>
for(var i=1;i<=10;i++){
document.write("<option value='"+i+"'>权限"+i+"</option>");
}
</script>
</select>
</td>
<td>
</td>
<td>
<select id="sectionB" style="height:300px;width:200px;" multiple>
</select>
</td>
</tr>
</table>
<div id="showListContent"></div>
</body>
</html>
3891
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
