鼠标拖放表格内容到下拉列表

最新推荐文章于 2022-02-03 16:15:23 发布

zhouzhenxing_0421

最新推荐文章于 2022-02-03 16:15:23 发布

阅读量66

点赞数

分类专栏： WEB2.0 文章标签： Google HTML

本文链接：https://blog.csdn.net/zhouzhenxing_0421/article/details/83319614

版权

WEB2.0 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var tmpDragObj; 
function dragStart(){ 
tmpDragObj = event.srcElement; 
tdiv = document.createElement("div"); 
tdiv.innerHTML = tmpDragObj.outerHTML; 
tdiv.style.display = "block"; 
tdiv.style.position = "absolute"; 
tdiv.style.filter = "alpha(opacity=100)"; 
tdiv.style.cursor = "move"; 
tdiv.style.width = tmpDragObj.offsetWidth; 
tdiv.style.height = tmpDragObj.offsetHeight; 
tdiv.style.top = getInfo(tmpDragObj).top; 
tdiv.style.left = getInfo(tmpDragObj).left; 

document.body.appendChild(tdiv); 
lastX = event.clientX; 
lastY = event.clientY; 
lastLeft = tdiv.style.left; 
lastTop = tdiv.style.top; 
try 
{ 
tmpDragObj.dragDrop(); 
}catch(e) 
{ 

} 
} 
function draging() 
{ 
var tX = event.clientX; 
var tY = event.clientY; 

tdiv.style.left = parseInt(lastLeft) + tX-lastX; 
tdiv.style.top = parseInt(lastTop) + tY-lastY; 
} 

function getInfo(o)//取得坐标 
{ 
var to=new Object(); 
to.left=to.right=to.top=to.bottom=0; 
var twidth=o.offsetWidth; 
var theight=o.offsetHeight; 
while(o!=document.body) 
{ 
to.left+=o.offsetLeft; 
to.top+=o.offsetTop; 
o=o.offsetParent; 
} 
to.right=to.left+twidth; 
to.bottom=to.top+theight; 
return to; 
} 
function dragEnd() 
{ 
if (true) 
{ 
var tX=event.clientX; 
var tY=event.clientY; 
var parentCell=getInfo(ejej); 
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom) 
{ 
if (tmpDragObj.innerHTML == "") return; 
var tempoption = document.createElement("option"); 
tempoption.value=tmpDragObj.innerHTML; 
tempoption.text=tmpDragObj.innerHTML; 
ejej.options.add(tempoption); 
tmpDragObj.style.backgroundColor = "red"; 
tdiv.innerHTML = "33333"; 
document.body.removeChild(tdiv); 

return; 
} 

} 
mm = ff(150,15); 
} 

function ff(aa,ab)//从GOOGLE网站来,用于恢复位置 
{ 
var ac=parseInt(getInfo(tdiv).left); 
var ad=parseInt(getInfo(tdiv).top); 
var ae=(ac-getInfo(tmpDragObj).left)/ab; 
var af=(ad-getInfo(tmpDragObj).top)/ab; 
return setInterval(function() 
{ 
if(ab<1) 
{ 
clearInterval(mm); 
tdiv.removeNode(true); 
tmpDragObj=null; 
return 
} 
ab--; 
ac-=ae; 
ad-=af; 
tdiv.style.left=parseInt(ac)+"px"; 
tdiv.style.top=parseInt(ad)+"px" 
}, aa/ab) 
} 

function createTable(){ 
var table_1 = document.createElement("table"); 
var table_2 = document.createElement("tbody"); 
for(i=0;i<3;i++){ 
var row_temp = document.createElement("tr"); 
for(j=0;j<5;j++){ 
var td_temp = document.createElement("td"); 
td_temp.setAttribute("width","100"); 
td_temp.onmousedown = dragStart; 
td_temp.ondrag = draging; 
td_temp.ondragend = dragEnd; 
td_temp.appendChild(document.createTextNode(i*5+j)); 
row_temp.appendChild(td_temp); 
} 
table_2.appendChild(row_temp); 
} 
table_1.setAttribute("border","1"); 
table_1.appendChild(table_2); 
document.body.appendChild(table_1); 

} 
//--> 
</SCRIPT> 
</HEAD> 

<BODY> 
<TABLE border="1" width="300"> 
<TR> 
<TD onmousedown="dragStart();" ondrag="draging();" ondragend="dragEnd();" >sdfasdfas</TD> 
</TR> 
<TR> 
<TD onmousedown="dragStart();" ondrag="draging();" ondragend="dragEnd();" >34535345</TD> 
</TR> 
</TABLE> 
<input type="text" name="cmbLevel1"/> 

<SELECT NAME="ejej" style="width:220px;"> 
</SELECT> 
<div id="xx"></div> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
createTable(); 
//--> 
</SCRIPT> 
</BODY> 
</HTML>