拖放的效果

很多框架都可以做这种事情，比如scriptaculous，ext，jQuery等等，其中scriptaculous好像有个Sortable类可以使用，另外用Draggable也可以，Ext里面好像是在Ext.dd这个包里面的，你可以去看看，JQuery嘛楼上已经有例子了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.imgContainer{
width:500px;
height:400px;
background-color:#f0f0ff;
border-color:#0000CC;
border-style:solid;
border-width:1px;
}

.imgContainerSel{
width:500px;
height:400px;
background-color:#f0f0ff;
border-color:#0000CC;
border-style:solid;
border-width:1px;
cursor:crosshair;
}

.btn{
background-color:#0000CC;
width:40px;
height:21px;
margin:2px;
line-height:21px;
text-align:center;
cursor:pointer;
float:left;
}

.pressedBtn{
background-color:#ff0099;
width:40px;
height:21px;
margin:2px;
line-height:21px;
text-align:center;
cursor:pointer;
float:left;
}

#toolBar{
width:500px;
height:25px;
background-color:#0066FF;
}

.tdDiv{
width:0px;
height:0px;
background-color:#00FF66;
position:absolute;
}

.control{
top:500px;
left:500px;
position:absolute;
width:8px;
height:8px;
line-height:2px;
font-size:2px;
background-color:#000000;
cursor:n-resize;
}
</style>
<script type="text/javascript">
//为对象增加事件
function addEvent(obj, evType, fn, useCapture)
{
if(obj.addEventListener)
{
obj.addEventListener(evType, fn, useCapture);
return true;
}
else if(obj.attachEvent)
{
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else
{
alert("不能为该对象增加事件！");
}
}
//
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}; //取得滚动条位置
function getScroll()
{
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return { top: t, left: l, width: w, height: h };
} //初始化画图板
function initImgEdit()
{
var imgEdit = {};
imgEdit.state = null;
imgEdit.toolBar = $('toolBar');
imgEdit.imgContainer = $('imgContainer');
imgEdit.onSel = function()
{
this.state = 'select';
this.imgContainer.className = 'imgContainerSel';
$('selBtn').className = 'pressedBtn';
}
imgEdit.onPointer = function()
{
this.state = 'pointer';
this.imgContainer.className = 'imgContainer';
$('poinBtn').className = 'pressedBtn';
}
imgEdit.resetState = function()
{
this.state = null;
this.imgContainer.className = 'imgContainer';
$('selBtn').className = 'btn';
$('poinBtn').className = 'btn';
}
return imgEdit;
}

//选区按钮单击事件处理函数
function selBtnClick(eve)
{
imgEdit.resetState();
if(!(imgEdit.state=='select'))
{
imgEdit.onSel();
}
}

//指针按钮单击事件处理函数
function poinBtnClick(eve)
{
imgEdit.resetState();
if(!(imgEdit.state=='pointer'))
{
imgEdit.onPointer();
}
}

//绘图区鼠标左键按下
function imgConLPress(eve)
{
if(imgEdit.state == 'select' && eve.button<2)
{
var scr = getScroll();
$('info').innerHTML = scr.top;
var x = eve.clientX+parseInt(scr.left);
var y = eve.clientY+parseInt(scr.top);
var tdDiv = createTdDiv(x, y);
if(imgEdit.curTd)
{
imgEdit.curTd.style.border = 'none';
imgEdit.curTd.style.cursor = 'auto';
}
imgEdit.curTd = tdDiv;
imgEdit.mousePressed = true;
imgEdit.curTdLeft = x;
imgEdit.curTdTop = y;
}
}

//创建一个单元格
function createTdDiv(x, y)
{
var tdDiv = document.createElement('div');
tdDiv.className = 'tdDiv';
tdDiv.style.left = x;
tdDiv.style.top = y;
tdDiv.className = 'tdDiv';
imgEdit.imgContainer.appendChild(tdDiv);
return tdDiv;
}

//鼠标在绘图区移动
function onEditConMove(eve)
{
var scr = getScroll();
var x = eve.clientX+scr.left;
var y = eve.clientY+scr.top;
var tdDiv = imgEdit.curTd;
if(imgEdit.state == 'select' && imgEdit.mousePressed)
{

tdDiv.style.width = Math.abs(x - imgEdit.curTdLeft);
tdDiv.style.height = Math.abs(y - imgEdit.curTdTop);
}
else if(imgEdit.state == 'pointer' && imgEdit.mousePressed)
{
tdDiv.style.left = x - imgEdit._width;
tdDiv.style.top = y - imgEdit._height;
}
}

//鼠标键松开
function onEditConUp(eve)
{
if(imgEdit.state=='select'&&eve.button<2)
{
imgEdit.mousePressed = false;
if(imgEdit.curTd.offsetWidth<5 || imgEdit.curTd.offsetHeight<5)
{
imgEdit.imgContainer.removeChild(imgEdit.curTd);
}
else
{
addEvent(imgEdit.curTd, 'click', tdDivClick, false);
addEvent(imgEdit.curTd, 'mousedown', tdDivDown, false);
}
imgEdit.curTd = null;
}
else(imgEdit.state == 'pointer' && eve.button<2)
{
imgEdit.mousePressed = false;
}
}

//鼠标在单元格div上单击
function tdDivClick(eve)
{
if(imgEdit.state == 'pointer')
{
if(imgEdit.curTd)
{
imgEdit.curTd.style.border = 'none';
imgEdit.curTd.style.cursor = 'auto';
}
var srcElement = eve.srcElement?eve.srcElement:eve.target;
srcElement.style.border = 'thin dashed black';
srcElement.style.cursor = 'move';
imgEdit.curTd = srcElement;
}
}

//鼠标在单元格按下左键
function tdDivDown(eve)
{
var srcElement = eve.srcElement?eve.srcElement:eve.target;
if(eve.button<2 && imgEdit.state == 'pointer' && imgEdit.curTd && imgEdit.curTd == srcElement)
{
imgEdit.mousePressed = true;
var scr = getScroll();
//鼠标按下时光标相对页面的坐标
var x = eve.clientX+scr.left;
var y = eve.clientY+scr.top;
//div相对页面的坐标
var tdDiv = imgEdit.curTd;
var _x = parseInt(tdDiv.style.left || tdDiv.currentStyle.left);
var _y = parseInt(tdDiv.style.top || tdDiv.currentStyle.top);
//鼠标距div左上角的距离
imgEdit._width = x - _x;
imgEdit._height = y - _y;
}
}

//页面初始化
function pageInit(eve){
window.imgEdit = initImgEdit();
addEvent($('selBtn'), 'click', selBtnClick, false);
addEvent($('poinBtn'), 'click', poinBtnClick, false);
addEvent($('imgContainer'), 'mousedown', imgConLPress, false);
addEvent($('imgContainer'), 'mousemove', onEditConMove, false);
addEvent($('imgContainer'), 'mouseup', onEditConUp, false);
}
addEvent(window, 'load', pageInit, false);
</script>
</head>
<body>
<div id="info"></div>
<div id="imgEdit">
<div id="toolBar">
<div id="poinBtn" class="btn">指针</div>
<div id="selBtn" class="btn">选择</div>
<div></div>
</div>
<div id="imgContainer" class="imgContainer">11</div>
</div>
<br />
<div id="cLeft"></div>
<div id="cRight"></div>
<div id="cUp"></div>
<div id="cDown"></div>
<div id="cLeftUp"></div>
<div id="cLeftDown"></div>
<div id="cRightUp"></div>
<div id="cRightDown"></div>
</body>
</html>
我也正在做，希望对你有帮助

解决方案 »