Question

各位网页制作高手，谁能给我一个可以拖拽的div（我在jsp文件中使用）

如图那样点在黑色部分就可以拖拽，但是点在下面就不可以拖拽的效果，希望代码能精简一点谢谢！

Answer 1

<script type="text/javascript">
function $(id){ return document.getElementById(id);}
function moveEvent(e,id){
var isIE = (document.all)?true:false;
//navigator.userAgent.toLowerCase().indexOf("msie") != -1;
var e=window.event||e;
var drag = true;
var xx=isIE?e.x:e.pageX;
var yy=isIE?e.y:e.pageY;
var L = $(id).offsetLeft;
var T = $(id).offsetTop;
var _parent = $(id).parentNode;

$(id).onmousemove = function(e) {
var e=window.event||e;
if (drag) {
getOpacity($(id),50);
x=isIE?e.x:e.pageX; if(x<0)x=0;
y=isIE?e.y:e.pageY; if(y<0)y=0;
$(id).style.left = L-xx+x+"px";
$(id).style.top = T-yy+y+"px";
}
}
$(id).onmouseup=function(){
getOpacity($(id),100);
$(id).style.cursor = "default";
drag = false;
}
}

function getOpacity(node,level){
if(document.all){
node.style.filter = 'alpha(opacity='+level+')';
} else {
node.style.opacity = level/100;
}
}

window.onload=function(){
$("test").onmousedown = function(e){
this.style.cursor = "move";
this.style.position = "absolute";

e=window.event || e;
moveEvent(e,"test");
}
}
</script>
<style type="text/css">
#test{background-color:#FF0;border:1px solid darkred;color:darkblue;width:250px;text-align:center;height:60px;line-height:60px;z-index:9999;}
</style>
<div id="test">test for the drag</div>

Answer 2

百度搜索 jquery easyui， 里面有你需要的例子！

Answer 3

jquery ui 试试