管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

javascript实现鼠标选取拖动或Ctrl选取拖动

　　

<style>  
*{position:absolute;}  
#panel *{border:1px solid gray}  
</style>  
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%20%0D%0A%2F**********%E5%88%A4%E6%96%AD%E6%B5%8F%E8%A7%88%E5%99%A8**********%2F%20%20%0D%0Avar%20isIE%20%3D%20false%3B%20%20%0D%0Aif(document.all)%20isIE%20%3D%20true%3B%20%20%0D%0A%2F*******HashArray*******%2F%20%20%20%20%20%0D%0Afunction%20HashArray()%7B%20%20%0D%0A%20%20%20%20this.keyList%20%3D%20new%20Array()%3B%20%20%0D%0A%20%20%20%20this.put%20%3D%20function(key%2C%20value)%7B%20%20%0D%0A%20%20%20%20%20%20this%5Bkey%5D%20%3D%20value%3B%20%20%0D%0A%20%20%20%20%20%20if(!this.containsKey(key))%7B%20%20%0D%0A%20%20%20%20%20%20%20%20this.keyList.push(key)%3B%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20this.size%20%3D%20function()%7B%20%20%0D%0A%20%20%20%20%20%20return%20this.keyList.length%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20this.containsKey%20%3D%20function(key)%7B%20%20%0D%0A%20%20%20%20%20%20if(this.keyList.length%20%3D%3D%200)%20return%20false%3B%20%20%0D%0A%0D%0A%20%20%20%20%20%20var%20keyStr%20%3D%20this.keyList.join(%22%2C%22)%20%2B%20%22%2C%22%3B%20%20%0D%0A%0D%0A%20%20%20%20%20%20if(keyStr.indexOf(key%20%2B%20%22%2C%22)%20%3D%3D%20-1)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20return%20false%3B%20%20%0D%0A%20%20%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20this.get%20%3D%20function(key)%7B%20%20%0D%0A%20%20%20%20%20%20return%20this%5Bkey%5D%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20this.keySet%20%3D%20function()%7B%20%20%0D%0A%20%20%20%20%20%20return%20this.keyList%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20this.isEmpty%20%3D%20function()%7B%20%20%0D%0A%20%20%20%20%20%20return%20this.keyList.length%3D%3D0%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20this.remove%20%3D%20function(key)%7B%20%20%0D%0A%20%20%20%20%20%20if(this.containsKey(key))%7B%20%20%0D%0A%20%20%20%20%20%20%20%20delete%20this%5Bkey%5D%3B%20%20%0D%0A%20%20%20%20%20%20%20%20this.keyList.splice(this.getIndex(key)%2C%201)%3B%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20this.removeAll%20%3D%20function(key)%7B%20%20%0D%0A%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Cthis.keyList.length%3Bi%2B%2B)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20delete%20this%5Bthis.keyList%5Bi%5D%5D%3B%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20this.keyList.length%20%3D%200%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%0D%0A%20%20%20%20this.getIndex%20%3D%20function(key)%7B%20%20%0D%0A%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Cthis.keyList.length%3Bi%2B%2B)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20if(this.keyList%5Bi%5D%20%3D%3D%20key)%20return%20i%3B%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20this.toString%20%3D%20function()%7B%20%20%0D%0A%20%20%20%20%20%20var%20str%20%3D%20%22%22%3B%20%20%0D%0A%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Cthis.keyList.length%3Bi%2B%2B)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20str%2B%3D%20this.keyList%5Bi%5D%20%2B%20%22%3A%22%20%2B%20this%5Bthis.keyList%5Bi%5D%5D.toString()%20%2B%20%22%2C%22%3B%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20return%20str%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%7D%20%20%0D%0A%0D%0Avar%20dragArray%20%3D%20new%20HashArray()%3B%20%20%0D%0A%0D%0A%2F*********%E9%80%89%E4%B8%AD%E8%BE%B9%E6%A1%86%E5%8F%98%E8%89%B2********%2F%20%20%0D%0Afunction%20selecting(obj)%7B%20%20%0D%0A%20%20if(obj.selected)%20obj.style.borderColor%20%3D%20%22lime%22%3B%20%20%0D%0A%20%20else%20obj.style.borderColor%20%3D%20%22gray%22%3B%20%20%0D%0A%7D%20%20%0D%0A%0D%0A%2F*******%E6%8B%96%E5%8A%A8%E5%B0%81%E8%A3%85%E7%B1%BB********%2F%20%20%0D%0Afunction%20DragObject(obj)%7B%20%20%0D%0A%20%20this.oldX%20%3D%200%3B%20%20%0D%0A%20%20this.oldY%20%3D%200%3B%20%20%0D%0A%20%20this.isDraging%20%3D%20false%3B%20%20%0D%0A%20%20this.dragObj%20%3D%20obj%3B%20%20%0D%0A%20%20this.dragObj.style.position%3D%22absolute%22%3B%20%20%0D%0A%0D%0A%20%20if(!this.dragObj.style.left)%20this.dragObj.style.left%20%3D%200%3B%20%20%0D%0A%20%20if(!this.dragObj.style.top)%20this.dragObj.style.top%20%3D%200%3B%20%20%0D%0A%20%20%20%20%0D%0A%20%20var%20theObj%20%3D%20this%3B%20%20%0D%0A%20%20this.zIndex%20%3D%202%3B%20%20%0D%0A%20%20obj.onmousedown%20%3D%20function()%7B%20theObj.startDrag()%3B%20%7D%20%20%0D%0A%20%20obj.onmousemove%20%3D%20function()%7B%20theObj.drag()%3B%20%7D%20%20%0D%0A%20%20obj.onmouseup%20%3D%20function()%7B%20theObj.endDrag()%3B%20%7D%20%20%0D%0A%0D%0A%20%20this.startDrag%20%3D%20function()%7B%2F%2Falert(3)%20%20%0D%0A%20%20%20%20DragObject.curObj%20%3D%20this%3B%20%20%20%2F%2F%E5%BD%93%E5%89%8D%E8%A2%AB%E6%8B%96%E5%8A%A8%E5%AF%B9%E8%B1%A1%20%20%0D%0A%20%20%20%20this.isDrag%20%3D%20true%3B%20%20%0D%0A%20%20%20%20this.oldX%20%3D%20event.x%3B%20%20%0D%0A%20%20%20%20this.oldY%20%3D%20event.y%3B%20%20%0D%0A%20%20%20%20this.dragObj.style.zIndex%20%3D%20this.zIndex%2B%2B%3B%20%20%0D%0A%20%20%7D%20%20%0D%0A%20%20%20%20%0D%0A%20%20this.endDrag%20%3D%20function()%7B%20%20%0D%0A%20%20%20%20this.isDrag%20%3D%20false%3B%20%20%20%20%20%20%0D%0A%20%20%7D%20%20%0D%0A%0D%0A%20%20this.drag%20%3D%20function()%7B%20%20%0D%0A%20%20%20%20if(this.isDrag)%7B%20%20%0D%0A%20%20%20%20%20%20var%20x%20%3D%20window.event.x%3B%20%20%0D%0A%20%20%20%20%20%20var%20y%20%3D%20window.event.y%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20if(dragArray.containsKey(this.dragObj.id))%7B%20%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3CdragArray.keyList.length%3Bi%2B%2B)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20var%20obj%20%3D%20dragArray%5BdragArray.keyList%5Bi%5D%5D%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20obj.isOnDrag%20%3D%20true%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20obj.style.left%20%3D%20parseInt(obj.style.left.replace(%22px%22%2C%22%22))%20%2B%20(x%20-%20this.oldX)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20obj.style.top%20%3D%20parseInt(obj.style.top.replace(%22px%22%2C%22%22))%20%2B%20(y%20-%20this.oldY)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20this.oldX%20%3D%20x%3B%20%20%0D%0A%20%20%20%20%20%20this.oldY%20%3D%20y%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%7D%20%20%0D%0A%7D%20%20%0D%0A%2F*********%E6%8B%96%E5%8A%A8DIV********%2F%20%20%0D%0AisMouseDown%20%3D%20false%3B%20%20%0D%0Avar%20originX%2CoriginY%3B%20%20%0D%0Avar%20isDrag%20%3D%20false%3B%20%20%0D%0A%0D%0Afunction%20moveDiv(e)%7B%20%20%0D%0A%20%20%20%20%0D%0A%20%20if(DragObject.curObj)%20DragObject.curObj.drag()%3B%20%20%0D%0A%0D%0A%20%20if(isMouseDown%20%26%26%20!isDrag)%7B%20%20%0D%0A%20%20%20%20var%20x%2Cy%3B%20%20%0D%0A%20%20%20%20if(document.all)%7B%20%20%0D%0A%20%20%20%20%20%20x%20%3D%20event.x%3B%20%20%0D%0A%20%20%20%20%20%20y%20%3D%20event.y%3B%20%20%0D%0A%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20x%20%3D%20e.pageX%3B%20%20%0D%0A%20%20%20%20%20%20y%20%3D%20e.pageY%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%20%20divMove.style.display%3D%22block%22%3B%20%20%0D%0A%20%20%20%20divMove.style.width%20%3D%20Math.abs(x-originX)%20%2B%20%22px%22%3B%20%20%0D%0A%20%20%20%20divMove.style.height%20%3D%20Math.abs(y-originY)%20%2B%20%22px%22%3B%20%20%0D%0A%20%20%20%20if(x%20%3E%20originX)%7B%20%20%0D%0A%20%20%20%20%20%20divMove.style.left%20%3D%20originX%2B%20%22px%22%3B%20%20%0D%0A%20%20%20%20%7Delse%20divMove.style.left%20%3D%20(x-2)%2B%20%22px%22%3B%20%20%0D%0A%20%20%20%20%20%20%0D%0A%20%20%20%20if(y%20%3E%20originY)%7B%20%20%0D%0A%20%20%20%20%20%20divMove.style.top%20%3D%20originY%2B%20%22px%22%3B%20%20%0D%0A%20%20%20%20%7Delse%20divMove.style.top%20%3D%20(y-2)%2B%20%22px%22%3B%20%20%0D%0A%20%20%20%7D%20%20%0D%0A%20%20%20%20%0D%0A%7D%20%20%0D%0A%0D%0A%2F**********%E5%A4%84%E7%90%86mousedown%E4%BA%8B%E4%BB%B6********%2F%20%20%0D%0Afunction%20mousedown(e)%7B%20%20%0D%0A%20%20if(isIE)%7B%20%20%0D%0A%20%20%20%20if(event.srcElement.id%20%3D%3D%20%22panel%22)%7B%20%20%0D%0A%20%20%20%20%20%20originX%3Devent.x%3B%20%20%0D%0A%20%20%20%20%20%20originY%3Devent.y%3B%20%20%0D%0A%20%20%20%20%20%20isMouseDown%3Dtrue%3B%20%20%0D%0A%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20isDrag%20%3D%20true%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20if(e.target.id%20%3D%3D%20%22panel%22)%7B%20%20%0D%0A%20%20%20%20%20%20originX%3De.pageX%3B%20%20%0D%0A%20%20%20%20%20%20originY%3De.pageY%3B%20%20%0D%0A%20%20%20%20%20%20isMouseDown%3Dtrue%3B%20%20%0D%0A%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20isDrag%20%3D%20true%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%7D%20%20%0D%0A%7D%20%20%0D%0A%0D%0A%2F**********%E5%A4%84%E7%90%86mouseup%E4%BA%8B%E4%BB%B6********%2F%20%20%0D%0Afunction%20mouseup(e)%7B%20%20%0D%0A%20%20if(isIE)%7B%20%20%0D%0A%20%20%20%20if(event.srcElement.id%20%3D%3D%20%22divMove%22%20%7C%7C%20event.srcElement.id%20%3D%3D%20%22panel%22)%7B%20%20%0D%0A%20%20%20%20%20%20selectObjects()%3B%20%20%0D%0A%20%20%20%20%20%20isMouseDown%3Dfalse%3B%20%20%0D%0A%20%20%20%20%20%20divMove.style.display%3D'none'%3B%20%20%0D%0A%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20if(DragObject.curObj)%20DragObject.curObj.endDrag()%3B%20%20%0D%0A%20%20%20%20%20%20isDrag%20%3D%20false%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20if(e.target.id%20%3D%3D%20%22divMove%22%20%7C%7C%20e.target.id%20%3D%3D%20%22panel%22)%7B%20%20%0D%0A%20%20%20%20%20%20selectObjects()%3B%20%20%0D%0A%20%20%20%20%20%20isMouseDown%3Dfalse%3B%20%20%0D%0A%20%20%20%20%20%20divMove.style.display%3D'none'%3B%20%20%0D%0A%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20if(DragObject.curObj)%20DragObject.curObj.endDrag()%3B%20%20%0D%0A%20%20%20%20%20%20isDrag%20%3D%20false%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%7D%20%20%0D%0A%7D%20%20%0D%0A%0D%0A%2F*********%E9%80%89%E4%B8%AD%E5%AF%B9%E8%B1%A1********%2F%20%20%0D%0Afunction%20selectObjects()%7B%20%20%0D%0A%20%20for(var%20i%3D0%3Bi%3Celems.length%3Bi%2B%2B)%7B%20%20%0D%0A%20%20%20%20var%20objX%20%3D%20elems%5Bi%5D.offsetLeft%20%2B%20elems%5Bi%5D.offsetWidth%2F2%3B%20%20%0D%0A%20%20%20%20var%20objY%20%3D%20elems%5Bi%5D.offsetTop%20%2B%20elems%5Bi%5D.offsetWidth%2F2%3B%20%20%0D%0A%20%20%20%20if(objX%20%3E%20divMove.offsetLeft%20%26%26%20objX%20%3C%20divMove.offsetLeft%20%2B%20parseInt(divMove.style.width)%20%20%26%26%20%20%0D%0A%20%20%20%20%20%20%20objY%20%3E%20divMove.offsetTop%20%26%26%20objY%20%3C%20divMove.offsetTop%20%2B%20parseInt(divMove.style.width))%7B%20%20%0D%0A%20%20%20%20%20%20elems%5Bi%5D.selected%20%3D%20true%3B%20%20%0D%0A%20%20%20%20%20%20dragArray.put(elems%5Bi%5D.id%2C%20elems%5Bi%5D)%3B%20%20%0D%0A%20%20%20%20%20%20selecting(elems%5Bi%5D)%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%7D%20%20%0D%0A%7D%20%20%0D%0A%0D%0A%0D%0A%2F**********ID%E5%8F%96%E5%AF%B9%E8%B1%A1********%2F%20%20%0D%0Afunction%20%24()%7B%20%20%0D%0A%20%20if(document.getElementById)%7B%20%20%0D%0A%20%20%20%20return%20document.getElementById(arguments%5B0%5D)%3B%20%20%0D%0A%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20return%20eval(arguments%5B0%5D)%3B%20%20%0D%0A%20%20%7D%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">  
<body onselectstart="return false;">

<div id="divMove" style="z-index:9999;display:none;border:1px solid lime;background:transparent;font-size:0px"></div>  
<div id="panel" style="width:1024;height:768;background:#555555;left:0px;top:0px">  
<input id="z" type="button" value="注 册" style="top:200px;left:200px;">  
<div id="d" style="width:150px;height:50px;top:100px;left:150px;">中国是一个发展中国家</div>  
</div>  
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%20%0D%0Avar%20divMove%20%3D%20%24(%22divMove%22)%3B%20%20%0D%0Avar%20elems%20%3D%20%24(%22panel%22).children%3B%20%20%0D%0Adocument.onmousemove%3DmoveDiv%3B%20%20%20%0D%0Adocument.onmousedown%3Dmousedown%3B%20%20%0D%0Adocument.onmouseup%3Dmouseup%3B%20%20%0D%0A%0D%0Afor(var%20i%3D0%3Bi%3Celems.length%3Bi%2B%2B)%7B%20%20%0D%0A%20%20with(elems%5Bi%5D)%7B%20%20%0D%0A%20%20%20%20elems%5Bi%5D.dragObj%20%3D%20new%20DragObject(elems%5Bi%5D)%3B%20%20%0D%0A%20%20%20%20elems%5Bi%5D.selected%20%3D%20false%3B%20%20%0D%0A%20%20%20%20elems%5Bi%5D.isOnDrag%20%3D%20false%3B%20%20%0D%0A%20%20%20%20onclick%20%3D%20function()%7B%20%20%0D%0A%20%20%20%20%20%20if(this.selected)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20if(!this.isOnDrag)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20this.selected%20%3D%20!selected%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20dragArray.remove(this.id)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20this.isOnDrag%20%3D%20false%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%20%20%0D%0A%20%20%20%20%20%20%7Delse%20if(dragArray.isEmpty()%20%7C%7C%20event.ctrlKey)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20this.selected%20%3D%20!selected%3B%20%20%0D%0A%20%20%20%20%20%20%20%20dragArray.put(this.id%2C%20this)%3B%20%20%0D%0A%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20selecting(this)%3B%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%7D%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">  
</body>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程