拖放的效果 jQuery 有现成的例子,给你个连接:http://jquery.org.cn/demo/UI/demos/ui.droppable.html 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 很多框架都可以做这种事情,比如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>我也正在做,希望对你有帮助 下拉列表 事件的 兼容 用JS做一个计算经过了多少天的函数 求一个正则 JS如何获取TR的ID? 求IE6下切换TAB菜单无下边框解决办法(Firefox没问题,要求不用相对定位绝对定位 和修改各块边框设置) 关于firebug的使用 强大的onpropertychange 求浏览器的兼容方案 ***小弟想用javascript写一个这样的坐标图***** Aptana 关键字的问题 导航改背景颜色 是点击 换行的区别,简单的问题 数据的处理?
<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>
我也正在做,希望对你有帮助