道理跟用js拖动div一样，只要你把datalist放在div里面就可以。
用jquery比较容易实现
下载引用jquery.js<script language=”javascript” type=”text/javascript” src=”jquery-1.2.6.js”></script><style type=”text/css”><!–body {background-color: #333333;}.win{position:absolute;top:0px;left:0px;width:300px;height:222px;}.title{height:20px;width:300px;position:absolute;background-color:#666666;float:inherit;top:0px;left:0px;background-image:url(bgo.gif);}.winCon{height:200px;width:298px;position:absolute;border:solid;border-width:1px;border-color:#666666;border-top:none;float:inherit;left:0px;top:20px;}–></style><a href=”#” onclick=”addDiv(this,’asd’);”>asgfsdg</a><a href=”#” id=”zxca” onclick=”addDiv(this,’zxc’);”>asgfsdg</a><script language=”javascript” type=”text/javascript”>function addDiv(element,str){
$(document.body).append(”<div class=’win’ id=’win”+str+”‘><div class=’title’ id=’”+str+”‘></div><div class=’winCon’>asfsdgfsdgsd</div></div>”);$(”#”+str).mousedown(function(event){var offset = $(this).offset();_x=event.clientX-offset.left;_y=event.clientY+20-offset.top;$(”#win”+str).css({”top”:offset.top-20+”px”});$(”#win”+str).mousemove(function(event){_xx=event.clientX-_x;_yy=event.clientY-_y;this.style.left=_xx+”px”;this.style.top=_yy+”px”;this.style.zIndex=”100″;return false;});return false;});$(”#win”+str).mouseup(function(){$(this).unbind(”mousemove”);$(this).css({”z-index”:”-1″});return false;});element.removeEventListener(”click”,true);}</script>
把你的datalist放在move_div之中就行了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="ext/jquery-1.2.6.pack.js"></script>
<style type="text/css">
.moveDiv{ position:absolute; width:150px;height:200px;}
#move_div .headDiv{ height:20px; cursor:move;background-color:blue;float:left; width:111px;}
#move_div .bodyDiv{ height:180px;width:150px; float:left; background-color:green;}
#move_div .close,.setSmall,.setBig{height:20px; width:13px;cursor:pointer;float:left;}
#move_div .close{background-color:red; }
#move_div .setSmall{background-color:yellow;}
#move_div .setBig{background-color:darkgreen;}
</style>
<script type="text/javascript">
var x1,y1;
$(document).ready(function(){
$(".headDiv").mousedown(
function(event){
var offset=$("#move_div").offset();
x1=event.clientX-offset.left;
y1=event.clientY-offset.top;
var witchButton=false;
if(document.all&&event.button==1){witchButton=true;}
else{if(event.button==0)witchButton=true;}
if(witchButton)//按左键,FF是0，IE是1
{
$(document).mousemove(function(event){
$(".moveDiv").css("left",(event.clientX-x1)+"px");
$(".moveDiv").css("top",(event.clientY-y1)+"px");
})
}
})
$(".headDiv").mouseup(
function(event){
$(document).unbind("mousemove");
})
$("#close").click(
function(event){
$(".moveDiv").css("display","none");
})
$("#setSmall").click(
function(event){
$(".bodyDiv").css("display","none");
})
$("#setBig").click(
function(event){
$(".bodyDiv").css("display","block");
})
}
);
</script>
</head>
<body>
<table id="table1">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
<button id="btn1" type="button" value="TestJquery" onclick="btnClick()">TestJquery</button>
<br/>
<select>
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
</select>
<div id="hello">
<div id="move_div" class="moveDiv" style="z-index:9999;">
<div class="headDiv"></div>
<div id="setSmall" class="setSmall">--</div>
<div id="setBig" class="setBig">[]</div>
<div id="close" class="close">X</div>
<div class="bodyDiv">
</div>
</div>
<div id="disable_oDiv" class="moveDiv" style="background-color:White; z-index:9998;FILTER:alpha(opacity=50);-moz-opacity:.5;opacity:0.5;";>
<iframe src="about:blank" name="hiddenIframe" width="150px" frameborder="0" height="200px"></iframe>
</div>
</div>
</body>
</html>