JavaScript는 마우스 선택 및 드래그 또는 Ctrl 선택 및 dragging_javascript 기술을 구현합니다.
- WBOY원래의
- 2016-05-16 19:11:561602검색
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]<script>
/**********判断浏览器**********/
var isIE = false;
if(document.all) isIE = true;
/*******HashArray*******/
function HashArray(){
this.keyList = new Array();
this.put = function(key, value){
this[key] = value;
if(!this.containsKey(key)){
this.keyList.push(key);
}
}
this.size = function(){
return this.keyList.length;
}
this.containsKey = function(key){
if(this.keyList.length == 0) return false;
var keyStr = this.keyList.join(",") + ",";
if(keyStr.indexOf(key + ",") == -1){
return false;
}else{
return true;
}
}
this.get = function(key){
return this[key];
}
this.keySet = function(){
return this.keyList;
}
this.isEmpty = function(){
return this.keyList.length==0;
}
this.remove = function(key){
if(this.containsKey(key)){
delete this[key];
this.keyList.splice(this.getIndex(key), 1);
}
}
this.removeAll = function(key){
for(var i=0;i<this.keyList.length;i++){
delete this[this.keyList[i]];
}
this.keyList.length = 0;
}
this.getIndex = function(key){
for(var i=0;i<this.keyList.length;i++){
if(this.keyList[i] == key) return i;
}
}
this.toString = function(){
var str = "";
for(var i=0;i<this.keyList.length;i++){
str+= this.keyList[i] + ":" + this[this.keyList[i]].toString() + ",";
}
return str;
}
}
var dragArray = new HashArray();
/*********选中边框变色********/
function selecting(obj){
if(obj.selected) obj.style.borderColor = "lime";
else obj.style.borderColor = "gray";
}
/*******拖动封装类********/
function DragObject(obj){
this.oldX = 0;
this.oldY = 0;
this.isDraging = false;
this.dragObj = obj;
this.dragObj.style.position="absolute";
if(!this.dragObj.style.left) this.dragObj.style.left = 0;
if(!this.dragObj.style.top) this.dragObj.style.top = 0;
var theObj = this;
this.zIndex = 2;
obj.onmousedown = function(){ theObj.startDrag(); }
obj.onmousemove = function(){ theObj.drag(); }
obj.onmouseup = function(){ theObj.endDrag(); }
this.startDrag = function(){//alert(3)
DragObject.curObj = this; //当前被拖动对象
this.isDrag = true;
this.oldX = event.x;
this.oldY = event.y;
this.dragObj.style.zIndex = this.zIndex++;
}
this.endDrag = function(){
this.isDrag = false;
}
this.drag = function(){
if(this.isDrag){
var x = window.event.x;
var y = window.event.y;
if(dragArray.containsKey(this.dragObj.id)){
for(var i=0;i<dragArray.keyList.length;i++){
var obj = dragArray[dragArray.keyList[i]];
obj.isOnDrag = true;
obj.style.left = parseInt(obj.style.left.replace("px","")) + (x - this.oldX);
obj.style.top = parseInt(obj.style.top.replace("px","")) + (y - this.oldY);
}
}
this.oldX = x;
this.oldY = y;
}
}
}
/*********拖动DIV********/
isMouseDown = false;
var originX,originY;
var isDrag = false;
function moveDiv(e){
if(DragObject.curObj) DragObject.curObj.drag();
if(isMouseDown && !isDrag){
var x,y;
if(document.all){
x = event.x;
y = event.y;
}else{
x = e.pageX;
y = e.pageY;
}
divMove.style.display="block";
divMove.style.width = Math.abs(x-originX) + "px";
divMove.style.height = Math.abs(y-originY) + "px";
if(x > originX){
divMove.style.left = originX+ "px";
}else divMove.style.left = (x-2)+ "px";
if(y > originY){
divMove.style.top = originY+ "px";
}else divMove.style.top = (y-2)+ "px";
}
}
/**********处理mousedown事件********/
function mousedown(e){
if(isIE){
if(event.srcElement.id == "panel"){
originX=event.x;
originY=event.y;
isMouseDown=true;
}else{
isDrag = true;
}
}else{
if(e.target.id == "panel"){
originX=e.pageX;
originY=e.pageY;
isMouseDown=true;
}else{
isDrag = true;
}
}
}
/**********处理mouseup事件********/
function mouseup(e){
if(isIE){
if(event.srcElement.id == "divMove" || event.srcElement.id == "panel"){
selectObjects();
isMouseDown=false;
divMove.style.display='none';
}else{
if(DragObject.curObj) DragObject.curObj.endDrag();
isDrag = false;
}
}else{
if(e.target.id == "divMove" || e.target.id == "panel"){
selectObjects();
isMouseDown=false;
divMove.style.display='none';
}else{
if(DragObject.curObj) DragObject.curObj.endDrag();
isDrag = false;
}
}
}
/*********选中对象********/
function selectObjects(){
for(var i=0;i<elems.length;i++){
var objX = elems[i].offsetLeft + elems[i].offsetWidth/2;
var objY = elems[i].offsetTop + elems[i].offsetWidth/2;
if(objX > divMove.offsetLeft && objX < divMove.offsetLeft + parseInt(divMove.style.width) &&
objY > divMove.offsetTop && objY < divMove.offsetTop + parseInt(divMove.style.width)){
elems[i].selected = true;
dragArray.put(elems[i].id, elems[i]);
selecting(elems[i]);
}
}
}
/**********ID取对象********/
function $(){
if(document.getElementById){
return document.getElementById(arguments[0]);
}else{
return eval(arguments[0]);
}
}
</script><script>
var divMove = $("divMove");
var elems = $("panel").children;
document.onmousemove=moveDiv;
document.onmousedown=mousedown;
document.onmouseup=mouseup;
for(var i=0;i<elems.length;i++){
with(elems[i]){
elems[i].dragObj = new DragObject(elems[i]);
elems[i].selected = false;
elems[i].isOnDrag = false;
onclick = function(){
if(this.selected){
if(!this.isOnDrag){
this.selected = !selected;
dragArray.remove(this.id);
}else{
this.isOnDrag = false;
}
}else if(dragArray.isEmpty() || event.ctrlKey){
this.selected = !selected;
dragArray.put(this.id, this);
}
selecting(this);
}
}
}
</script>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.